@haklex/rich-ext-gallery 0.0.30 → 0.0.32
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/GalleryEditNode.d.ts +14 -0
- package/dist/GalleryEditNode.d.ts.map +1 -0
- package/dist/GalleryNode.d.ts +2 -3
- package/dist/GalleryNode.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +58 -23
- package/package.json +4 -4
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SlashMenuItemConfig } from '@haklex/rich-editor';
|
|
2
|
+
import { EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
|
|
3
|
+
import { ReactElement } from 'react';
|
|
4
|
+
import { GalleryNode, GalleryNodePayload, SerializedGalleryNode } from './GalleryNode';
|
|
5
|
+
export declare class GalleryEditNode extends GalleryNode {
|
|
6
|
+
static slashMenuItems: SlashMenuItemConfig[];
|
|
7
|
+
static clone(node: GalleryEditNode): GalleryEditNode;
|
|
8
|
+
constructor(payload: GalleryNodePayload, key?: NodeKey);
|
|
9
|
+
static importJSON(serializedNode: SerializedGalleryNode): GalleryEditNode;
|
|
10
|
+
decorate(editor: LexicalEditor, _config: EditorConfig): ReactElement;
|
|
11
|
+
}
|
|
12
|
+
export declare function $createGalleryEditNode(payload: GalleryNodePayload): GalleryEditNode;
|
|
13
|
+
export declare function $isGalleryEditNode(node: LexicalNode | null | undefined): node is GalleryEditNode;
|
|
14
|
+
//# sourceMappingURL=GalleryEditNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryEditNode.d.ts","sourceRoot":"","sources":["../src/GalleryEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,mBAAmB,EACpB,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,cAAc,EAAE,mBAAmB,EAAE,CAa3C;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"}
|
package/dist/GalleryNode.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GalleryImage
|
|
1
|
+
import { GalleryImage } from '@haklex/rich-editor';
|
|
2
2
|
import { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread, DecoratorNode } from 'lexical';
|
|
3
3
|
import { ReactElement } from 'react';
|
|
4
4
|
export type SerializedGalleryNode = Spread<{
|
|
@@ -12,7 +12,6 @@ export interface GalleryNodePayload {
|
|
|
12
12
|
export declare class GalleryNode extends DecoratorNode<ReactElement> {
|
|
13
13
|
__images: GalleryImage[];
|
|
14
14
|
__layout: 'grid' | 'masonry' | 'carousel';
|
|
15
|
-
static slashMenuItems: SlashMenuItemConfig[];
|
|
16
15
|
static getType(): string;
|
|
17
16
|
static clone(node: GalleryNode): GalleryNode;
|
|
18
17
|
constructor(payload: GalleryNodePayload, key?: NodeKey);
|
|
@@ -25,7 +24,7 @@ export declare class GalleryNode extends DecoratorNode<ReactElement> {
|
|
|
25
24
|
setImages(images: GalleryImage[]): void;
|
|
26
25
|
getLayout(): 'grid' | 'masonry' | 'carousel';
|
|
27
26
|
setLayout(layout: 'grid' | 'masonry' | 'carousel'): void;
|
|
28
|
-
decorate(
|
|
27
|
+
decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement;
|
|
29
28
|
}
|
|
30
29
|
export declare function $createGalleryNode(payload: GalleryNodePayload): GalleryNode;
|
|
31
30
|
export declare function $isGalleryNode(node: LexicalNode | null | undefined): node is GalleryNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryNode.d.ts","sourceRoot":"","sources":["../src/GalleryNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { Klass, LexicalNode } from 'lexical';
|
|
2
|
+
export { $createGalleryEditNode, $isGalleryEditNode, GalleryEditNode, } from './GalleryEditNode';
|
|
2
3
|
export { GalleryEditRenderer } from './GalleryEditRenderer';
|
|
3
4
|
export type { GalleryNodePayload, SerializedGalleryNode } from './GalleryNode';
|
|
4
5
|
export { $createGalleryNode, $isGalleryNode, GalleryNode } from './GalleryNode';
|
|
5
6
|
export { default, GalleryRenderer } from './GalleryRenderer';
|
|
6
7
|
export declare const galleryNodes: Array<Klass<LexicalNode>>;
|
|
8
|
+
export declare const galleryEditNodes: Array<Klass<LexicalNode>>;
|
|
7
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +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;
|
|
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"}
|
package/dist/index.mjs
CHANGED
|
@@ -249,7 +249,7 @@ const GalleryFigure = memo(
|
|
|
249
249
|
}
|
|
250
250
|
);
|
|
251
251
|
const GalleryRenderer_default = memo(GalleryRenderer);
|
|
252
|
-
|
|
252
|
+
class GalleryNode extends DecoratorNode {
|
|
253
253
|
constructor(payload, key) {
|
|
254
254
|
super(key);
|
|
255
255
|
__publicField(this, "__images");
|
|
@@ -261,7 +261,7 @@ const _GalleryNode = class _GalleryNode extends DecoratorNode {
|
|
|
261
261
|
return "gallery";
|
|
262
262
|
}
|
|
263
263
|
static clone(node) {
|
|
264
|
-
return new
|
|
264
|
+
return new GalleryNode(
|
|
265
265
|
{
|
|
266
266
|
images: node.__images.map((img) => ({ ...img })),
|
|
267
267
|
layout: node.__layout
|
|
@@ -309,31 +309,61 @@ const _GalleryNode = class _GalleryNode extends DecoratorNode {
|
|
|
309
309
|
const writable = this.getWritable();
|
|
310
310
|
writable.__layout = layout;
|
|
311
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
|
+
const _GalleryEditNode = class _GalleryEditNode extends GalleryNode {
|
|
327
|
+
static clone(node) {
|
|
328
|
+
return new _GalleryEditNode(
|
|
329
|
+
{
|
|
330
|
+
images: node.__images.map((img) => ({ ...img })),
|
|
331
|
+
layout: node.__layout
|
|
332
|
+
},
|
|
333
|
+
node.__key
|
|
334
|
+
);
|
|
335
|
+
}
|
|
336
|
+
constructor(payload, key) {
|
|
337
|
+
super(payload, key);
|
|
338
|
+
}
|
|
339
|
+
static importJSON(serializedNode) {
|
|
340
|
+
return new _GalleryEditNode({
|
|
341
|
+
images: serializedNode.images,
|
|
342
|
+
layout: serializedNode.layout
|
|
343
|
+
});
|
|
344
|
+
}
|
|
312
345
|
decorate(editor, _config) {
|
|
313
346
|
const nodeKey = this.__key;
|
|
314
|
-
const isEditable = editor.isEditable();
|
|
315
347
|
const props = {
|
|
316
348
|
images: this.__images,
|
|
317
349
|
layout: this.__layout,
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
});
|
|
330
|
-
}
|
|
350
|
+
onImagesChange: (images) => {
|
|
351
|
+
editor.update(() => {
|
|
352
|
+
const node = $getNodeByKey(nodeKey);
|
|
353
|
+
if (node) node.setImages(images);
|
|
354
|
+
});
|
|
355
|
+
},
|
|
356
|
+
onLayoutChange: (layout) => {
|
|
357
|
+
editor.update(() => {
|
|
358
|
+
const node = $getNodeByKey(nodeKey);
|
|
359
|
+
if (node) node.setLayout(layout);
|
|
360
|
+
});
|
|
331
361
|
}
|
|
332
362
|
};
|
|
333
363
|
return createRendererDecoration("Gallery", GalleryRenderer, props);
|
|
334
364
|
}
|
|
335
365
|
};
|
|
336
|
-
__publicField(
|
|
366
|
+
__publicField(_GalleryEditNode, "slashMenuItems", [
|
|
337
367
|
{
|
|
338
368
|
title: "Gallery",
|
|
339
369
|
icon: createElement(Images, { size: 20 }),
|
|
@@ -342,17 +372,17 @@ __publicField(_GalleryNode, "slashMenuItems", [
|
|
|
342
372
|
section: "MEDIA",
|
|
343
373
|
onSelect: (editor) => {
|
|
344
374
|
editor.update(() => {
|
|
345
|
-
$insertNodes([$
|
|
375
|
+
$insertNodes([$createGalleryEditNode({ images: [] })]);
|
|
346
376
|
});
|
|
347
377
|
}
|
|
348
378
|
}
|
|
349
379
|
]);
|
|
350
|
-
let
|
|
351
|
-
function $
|
|
352
|
-
return new
|
|
380
|
+
let GalleryEditNode = _GalleryEditNode;
|
|
381
|
+
function $createGalleryEditNode(payload) {
|
|
382
|
+
return new GalleryEditNode(payload);
|
|
353
383
|
}
|
|
354
|
-
function $
|
|
355
|
-
return node instanceof
|
|
384
|
+
function $isGalleryEditNode(node) {
|
|
385
|
+
return node instanceof GalleryEditNode;
|
|
356
386
|
}
|
|
357
387
|
const layoutItems = [
|
|
358
388
|
{ value: "grid", label: "Grid" },
|
|
@@ -680,12 +710,17 @@ const GalleryEditRenderer = ({
|
|
|
680
710
|
] });
|
|
681
711
|
};
|
|
682
712
|
const galleryNodes = [GalleryNode];
|
|
713
|
+
const galleryEditNodes = [GalleryEditNode];
|
|
683
714
|
export {
|
|
715
|
+
$createGalleryEditNode,
|
|
684
716
|
$createGalleryNode,
|
|
717
|
+
$isGalleryEditNode,
|
|
685
718
|
$isGalleryNode,
|
|
719
|
+
GalleryEditNode,
|
|
686
720
|
GalleryEditRenderer,
|
|
687
721
|
GalleryNode,
|
|
688
722
|
GalleryRenderer,
|
|
689
723
|
GalleryRenderer_default as default,
|
|
724
|
+
galleryEditNodes,
|
|
690
725
|
galleryNodes
|
|
691
726
|
};
|
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.32",
|
|
4
4
|
"description": "Image gallery extension with drag-and-drop",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"react-intersection-observer": "^9.16.0",
|
|
23
23
|
"react-photo-view": "^1.2.7",
|
|
24
24
|
"thumbhash": "^0.1.1",
|
|
25
|
-
"@haklex/rich-editor
|
|
26
|
-
"@haklex/rich-editor": "0.0.
|
|
27
|
-
"@haklex/rich-style-token": "0.0.
|
|
25
|
+
"@haklex/rich-editor": "0.0.32",
|
|
26
|
+
"@haklex/rich-editor-ui": "0.0.32",
|
|
27
|
+
"@haklex/rich-style-token": "0.0.32"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "^19.2.14",
|