@haklex/rich-renderer-image 0.0.40 → 0.0.41
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/ImageRenderer-BzOAp28v.js +155 -0
- package/dist/index.mjs +5 -127
- package/dist/static.mjs +4 -0
- package/package.json +4 -4
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import "react-photo-view/dist/react-photo-view.css";
|
|
3
|
+
import { decodeThumbHash, vars } from "@haklex/rich-editor";
|
|
4
|
+
import { useState, useMemo } from "react";
|
|
5
|
+
import { PhotoProvider, PhotoView } from "react-photo-view";
|
|
6
|
+
var semanticClassNames = { root: "rr-image-root", frame: "rr-image-frame", frameLoading: "rr-image-loading", frameLoaded: "rr-image-loaded", frameError: "rr-image-error", image: "rr-image-img", loader: "rr-image-loader", errorBadge: "rr-image-error", caption: "rr-image-caption", editTrigger: "rr-image-edit-trigger", editPlaceholder: "rr-image-edit-placeholder", editToolbar: "rr-image-edit-toolbar", editToolbarVisible: "rr-image-edit-toolbar-visible", editToolbarButton: "rr-image-edit-toolbar-button", editToolbarButtonDanger: "rr-image-edit-toolbar-danger", editField: "rr-image-edit-field", editFieldIcon: "rr-image-edit-field-icon", editInput: "rr-image-edit-input", editActions: "rr-image-edit-actions", editActionButton: "rr-image-edit-action-btn", editActionButtonEnd: "rr-image-edit-action-btn--end", replaceUploadArea: "rr-image-replace-upload-area", replacePreview: "rr-image-replace-preview", panelHint: "rr-image-panel-hint" };
|
|
7
|
+
var root = "_1n94osf0";
|
|
8
|
+
var image = "_1n94osf2";
|
|
9
|
+
var imageState = { loading: "_1n94osf3", loaded: "_1n94osf4", error: "_1n94osf5" };
|
|
10
|
+
var imageVisible = "_1n94osf6";
|
|
11
|
+
var frame = "_1n94osf7";
|
|
12
|
+
var frameEditMode = "_1n94osf8";
|
|
13
|
+
var loader = "_1n94osfa";
|
|
14
|
+
var errorBadge = "_1n94osfb";
|
|
15
|
+
var caption = "_1n94osfc";
|
|
16
|
+
var editTrigger = "_1n94osfk";
|
|
17
|
+
var editPlaceholder = "_1n94osfl";
|
|
18
|
+
var editToolbar = "_1n94osfm";
|
|
19
|
+
var editToolbarVisible = "_1n94osfn";
|
|
20
|
+
var editToolbarButton = "_1n94osfo";
|
|
21
|
+
var editToolbarButtonDanger = "_1n94osfp";
|
|
22
|
+
var editPanel = "_1n94osfq";
|
|
23
|
+
var editField = "_1n94osfr";
|
|
24
|
+
var editFieldIcon = "_1n94osfs";
|
|
25
|
+
var editInput = "_1n94osft";
|
|
26
|
+
var editActions = "_1n94osfu";
|
|
27
|
+
var editActionButton = "_1n94osfv";
|
|
28
|
+
var editActionButtonEnd = "_1n94osfw";
|
|
29
|
+
var replaceUploadArea = "_1n94osfx";
|
|
30
|
+
var replacePreview = "_1n94osfy";
|
|
31
|
+
var panelHint = "_1n94osfz";
|
|
32
|
+
const frameStateSemanticClass = {
|
|
33
|
+
loading: semanticClassNames.frameLoading,
|
|
34
|
+
loaded: semanticClassNames.frameLoaded,
|
|
35
|
+
error: semanticClassNames.frameError
|
|
36
|
+
};
|
|
37
|
+
function getCaptionText(altText, caption2) {
|
|
38
|
+
if (caption2) return caption2;
|
|
39
|
+
if (!altText) return void 0;
|
|
40
|
+
if (altText.startsWith("!") || altText.startsWith("¡")) {
|
|
41
|
+
return altText.slice(1);
|
|
42
|
+
}
|
|
43
|
+
return void 0;
|
|
44
|
+
}
|
|
45
|
+
const ImageRenderer = ({
|
|
46
|
+
src,
|
|
47
|
+
altText,
|
|
48
|
+
width,
|
|
49
|
+
height,
|
|
50
|
+
caption: caption$1,
|
|
51
|
+
thumbhash,
|
|
52
|
+
accent
|
|
53
|
+
}) => {
|
|
54
|
+
const [state, setState] = useState("loading");
|
|
55
|
+
const captionText = useMemo(
|
|
56
|
+
() => getCaptionText(altText, caption$1),
|
|
57
|
+
[altText, caption$1]
|
|
58
|
+
);
|
|
59
|
+
const placeholderUrl = useMemo(
|
|
60
|
+
() => thumbhash ? decodeThumbHash(thumbhash) : void 0,
|
|
61
|
+
[thumbhash]
|
|
62
|
+
);
|
|
63
|
+
if (!src) return null;
|
|
64
|
+
const frameStyle = {
|
|
65
|
+
backgroundColor: !placeholderUrl ? accent || vars.color.bgTertiary : void 0,
|
|
66
|
+
backgroundImage: placeholderUrl && state !== "loaded" ? `url(${placeholderUrl})` : void 0,
|
|
67
|
+
backgroundSize: "cover",
|
|
68
|
+
width: width ? Math.min(width, 1200) : void 0,
|
|
69
|
+
maxWidth: "100%",
|
|
70
|
+
...width && height ? { aspectRatio: `${width} / ${height}` } : {}
|
|
71
|
+
};
|
|
72
|
+
return /* @__PURE__ */ jsxs("figure", { className: `${root} ${semanticClassNames.root}`, children: [
|
|
73
|
+
/* @__PURE__ */ jsx(PhotoProvider, { photoClosable: true, children: /* @__PURE__ */ jsx(PhotoView, { src, children: /* @__PURE__ */ jsxs(
|
|
74
|
+
"div",
|
|
75
|
+
{
|
|
76
|
+
className: `${frame} ${semanticClassNames.frame} ${imageState[state]} ${frameStateSemanticClass[state]}`.trim(),
|
|
77
|
+
style: frameStyle,
|
|
78
|
+
role: "button",
|
|
79
|
+
tabIndex: 0,
|
|
80
|
+
"aria-label": `Open image: ${altText || "image"}`,
|
|
81
|
+
onKeyDown: (e) => {
|
|
82
|
+
if (e.key !== "Enter" && e.key !== " ") return;
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
e.currentTarget.click();
|
|
85
|
+
},
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx(
|
|
88
|
+
"img",
|
|
89
|
+
{
|
|
90
|
+
src,
|
|
91
|
+
alt: altText,
|
|
92
|
+
width,
|
|
93
|
+
height,
|
|
94
|
+
loading: "lazy",
|
|
95
|
+
"data-state": state,
|
|
96
|
+
className: `${image} ${state === "loaded" ? imageVisible : ""} ${semanticClassNames.image}`,
|
|
97
|
+
style: width && height ? { height: "100%", objectFit: "cover" } : void 0,
|
|
98
|
+
onLoad: () => setState("loaded"),
|
|
99
|
+
onError: () => setState("error")
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
state === "loading" && /* @__PURE__ */ jsx(
|
|
103
|
+
"span",
|
|
104
|
+
{
|
|
105
|
+
className: `${loader} ${semanticClassNames.loader}`
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
state === "error" && /* @__PURE__ */ jsx(
|
|
109
|
+
"span",
|
|
110
|
+
{
|
|
111
|
+
className: `${errorBadge} ${semanticClassNames.errorBadge}`,
|
|
112
|
+
children: "Image failed to load"
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
) }) }),
|
|
118
|
+
captionText && /* @__PURE__ */ jsx(
|
|
119
|
+
"figcaption",
|
|
120
|
+
{
|
|
121
|
+
className: `${caption} ${semanticClassNames.caption}`,
|
|
122
|
+
children: captionText
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
] });
|
|
126
|
+
};
|
|
127
|
+
export {
|
|
128
|
+
ImageRenderer as I,
|
|
129
|
+
editFieldIcon as a,
|
|
130
|
+
editInput as b,
|
|
131
|
+
editActions as c,
|
|
132
|
+
editActionButton as d,
|
|
133
|
+
editField as e,
|
|
134
|
+
editActionButtonEnd as f,
|
|
135
|
+
replacePreview as g,
|
|
136
|
+
editToolbar as h,
|
|
137
|
+
editToolbarVisible as i,
|
|
138
|
+
editToolbarButton as j,
|
|
139
|
+
editPanel as k,
|
|
140
|
+
editToolbarButtonDanger as l,
|
|
141
|
+
editPlaceholder as m,
|
|
142
|
+
editTrigger as n,
|
|
143
|
+
root as o,
|
|
144
|
+
panelHint as p,
|
|
145
|
+
image as q,
|
|
146
|
+
replaceUploadArea as r,
|
|
147
|
+
semanticClassNames as s,
|
|
148
|
+
imageVisible as t,
|
|
149
|
+
loader as u,
|
|
150
|
+
errorBadge as v,
|
|
151
|
+
frame as w,
|
|
152
|
+
frameEditMode as x,
|
|
153
|
+
imageState as y,
|
|
154
|
+
caption as z
|
|
155
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { decodeThumbHash, useImageUpload, $isImageNode, $createImageNode, computeImageMeta,
|
|
2
|
+
import { decodeThumbHash, useImageUpload, $isImageNode, $createImageNode, computeImageMeta, useRendererMode } from "@haklex/rich-editor";
|
|
3
3
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
4
4
|
import { atom, createStore, Provider, useStore, useAtomValue, useSetAtom } from "jotai";
|
|
5
|
-
import { useRef, useState, useEffect, useCallback
|
|
5
|
+
import { useRef, useState, useEffect, useCallback } from "react";
|
|
6
6
|
import { SegmentedControl, Popover, PopoverTrigger, PopoverPanel } from "@haklex/rich-editor-ui";
|
|
7
7
|
import { ImageIcon, Type, Captions, Loader2, Upload, Replace, ExternalLink, Copy, Download, Trash2 } from "lucide-react";
|
|
8
|
+
import { e as editField, s as semanticClassNames, a as editFieldIcon, b as editInput, c as editActions, d as editActionButton, f as editActionButtonEnd, r as replaceUploadArea, p as panelHint, g as replacePreview, h as editToolbar, i as editToolbarVisible, j as editToolbarButton, k as editPanel, l as editToolbarButtonDanger, m as editPlaceholder, I as ImageRenderer, n as editTrigger, o as root, q as image, t as imageVisible, u as loader, v as errorBadge, w as frame, x as frameEditMode, y as imageState, z as caption } from "./ImageRenderer-BzOAp28v.js";
|
|
8
9
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
9
|
-
|
|
10
|
-
import { PhotoProvider, PhotoView } from "react-photo-view";
|
|
11
|
-
function getCaptionText$1(altText, caption2) {
|
|
10
|
+
function getCaptionText(altText, caption2) {
|
|
12
11
|
if (caption2) return caption2;
|
|
13
12
|
if (!altText) return void 0;
|
|
14
13
|
if (altText.startsWith("!") || altText.startsWith("¡")) {
|
|
@@ -50,7 +49,7 @@ const placeholderUrlAtom = atom((get) => {
|
|
|
50
49
|
return thumbhash ? decodeThumbHash(thumbhash) : void 0;
|
|
51
50
|
});
|
|
52
51
|
const captionTextAtom = atom(
|
|
53
|
-
(get) => getCaptionText
|
|
52
|
+
(get) => getCaptionText(get(altTextAtom), get(captionAtom))
|
|
54
53
|
);
|
|
55
54
|
const frameStyleAtom = atom((get) => {
|
|
56
55
|
const placeholderUrl = get(placeholderUrlAtom);
|
|
@@ -120,32 +119,6 @@ function ImageEditProvider({
|
|
|
120
119
|
}, [store, props.src]);
|
|
121
120
|
return /* @__PURE__ */ jsx(Provider, { store, children });
|
|
122
121
|
}
|
|
123
|
-
var semanticClassNames = { root: "rr-image-root", frame: "rr-image-frame", frameLoading: "rr-image-loading", frameLoaded: "rr-image-loaded", frameError: "rr-image-error", image: "rr-image-img", loader: "rr-image-loader", errorBadge: "rr-image-error", caption: "rr-image-caption", editTrigger: "rr-image-edit-trigger", editPlaceholder: "rr-image-edit-placeholder", editToolbar: "rr-image-edit-toolbar", editToolbarVisible: "rr-image-edit-toolbar-visible", editToolbarButton: "rr-image-edit-toolbar-button", editToolbarButtonDanger: "rr-image-edit-toolbar-danger", editField: "rr-image-edit-field", editFieldIcon: "rr-image-edit-field-icon", editInput: "rr-image-edit-input", editActions: "rr-image-edit-actions", editActionButton: "rr-image-edit-action-btn", editActionButtonEnd: "rr-image-edit-action-btn--end", replaceUploadArea: "rr-image-replace-upload-area", replacePreview: "rr-image-replace-preview", panelHint: "rr-image-panel-hint" };
|
|
124
|
-
var root = "_1n94osf0";
|
|
125
|
-
var image = "_1n94osf2";
|
|
126
|
-
var imageState = { loading: "_1n94osf3", loaded: "_1n94osf4", error: "_1n94osf5" };
|
|
127
|
-
var imageVisible = "_1n94osf6";
|
|
128
|
-
var frame = "_1n94osf7";
|
|
129
|
-
var frameEditMode = "_1n94osf8";
|
|
130
|
-
var loader = "_1n94osfa";
|
|
131
|
-
var errorBadge = "_1n94osfb";
|
|
132
|
-
var caption = "_1n94osfc";
|
|
133
|
-
var editTrigger = "_1n94osfk";
|
|
134
|
-
var editPlaceholder = "_1n94osfl";
|
|
135
|
-
var editToolbar = "_1n94osfm";
|
|
136
|
-
var editToolbarVisible = "_1n94osfn";
|
|
137
|
-
var editToolbarButton = "_1n94osfo";
|
|
138
|
-
var editToolbarButtonDanger = "_1n94osfp";
|
|
139
|
-
var editPanel = "_1n94osfq";
|
|
140
|
-
var editField = "_1n94osfr";
|
|
141
|
-
var editFieldIcon = "_1n94osfs";
|
|
142
|
-
var editInput = "_1n94osft";
|
|
143
|
-
var editActions = "_1n94osfu";
|
|
144
|
-
var editActionButton = "_1n94osfv";
|
|
145
|
-
var editActionButtonEnd = "_1n94osfw";
|
|
146
|
-
var replaceUploadArea = "_1n94osfx";
|
|
147
|
-
var replacePreview = "_1n94osfy";
|
|
148
|
-
var panelHint = "_1n94osfz";
|
|
149
122
|
function isSafeImageSrc(src) {
|
|
150
123
|
return !/^(?:javascript\s*:|vbscript\s*:|data\s*:(?!image\/))/i.test(src);
|
|
151
124
|
}
|
|
@@ -687,101 +660,6 @@ function ImageEditToolbar() {
|
|
|
687
660
|
}
|
|
688
661
|
);
|
|
689
662
|
}
|
|
690
|
-
const frameStateSemanticClass$1 = {
|
|
691
|
-
loading: semanticClassNames.frameLoading,
|
|
692
|
-
loaded: semanticClassNames.frameLoaded,
|
|
693
|
-
error: semanticClassNames.frameError
|
|
694
|
-
};
|
|
695
|
-
function getCaptionText(altText, caption2) {
|
|
696
|
-
if (caption2) return caption2;
|
|
697
|
-
if (!altText) return void 0;
|
|
698
|
-
if (altText.startsWith("!") || altText.startsWith("¡")) {
|
|
699
|
-
return altText.slice(1);
|
|
700
|
-
}
|
|
701
|
-
return void 0;
|
|
702
|
-
}
|
|
703
|
-
const ImageRenderer = ({
|
|
704
|
-
src,
|
|
705
|
-
altText,
|
|
706
|
-
width,
|
|
707
|
-
height,
|
|
708
|
-
caption: caption$1,
|
|
709
|
-
thumbhash,
|
|
710
|
-
accent
|
|
711
|
-
}) => {
|
|
712
|
-
const [state, setState] = useState("loading");
|
|
713
|
-
const captionText = useMemo(
|
|
714
|
-
() => getCaptionText(altText, caption$1),
|
|
715
|
-
[altText, caption$1]
|
|
716
|
-
);
|
|
717
|
-
const placeholderUrl = useMemo(
|
|
718
|
-
() => thumbhash ? decodeThumbHash(thumbhash) : void 0,
|
|
719
|
-
[thumbhash]
|
|
720
|
-
);
|
|
721
|
-
if (!src) return null;
|
|
722
|
-
const frameStyle = {
|
|
723
|
-
backgroundColor: !placeholderUrl ? accent || vars.color.bgTertiary : void 0,
|
|
724
|
-
backgroundImage: placeholderUrl && state !== "loaded" ? `url(${placeholderUrl})` : void 0,
|
|
725
|
-
backgroundSize: "cover",
|
|
726
|
-
width: width ? Math.min(width, 1200) : void 0,
|
|
727
|
-
maxWidth: "100%",
|
|
728
|
-
...width && height ? { aspectRatio: `${width} / ${height}` } : {}
|
|
729
|
-
};
|
|
730
|
-
return /* @__PURE__ */ jsxs("figure", { className: `${root} ${semanticClassNames.root}`, children: [
|
|
731
|
-
/* @__PURE__ */ jsx(PhotoProvider, { photoClosable: true, children: /* @__PURE__ */ jsx(PhotoView, { src, children: /* @__PURE__ */ jsxs(
|
|
732
|
-
"div",
|
|
733
|
-
{
|
|
734
|
-
className: `${frame} ${semanticClassNames.frame} ${imageState[state]} ${frameStateSemanticClass$1[state]}`.trim(),
|
|
735
|
-
style: frameStyle,
|
|
736
|
-
role: "button",
|
|
737
|
-
tabIndex: 0,
|
|
738
|
-
"aria-label": `Open image: ${altText || "image"}`,
|
|
739
|
-
onKeyDown: (e) => {
|
|
740
|
-
if (e.key !== "Enter" && e.key !== " ") return;
|
|
741
|
-
e.preventDefault();
|
|
742
|
-
e.currentTarget.click();
|
|
743
|
-
},
|
|
744
|
-
children: [
|
|
745
|
-
/* @__PURE__ */ jsx(
|
|
746
|
-
"img",
|
|
747
|
-
{
|
|
748
|
-
src,
|
|
749
|
-
alt: altText,
|
|
750
|
-
width,
|
|
751
|
-
height,
|
|
752
|
-
loading: "lazy",
|
|
753
|
-
"data-state": state,
|
|
754
|
-
className: `${image} ${state === "loaded" ? imageVisible : ""} ${semanticClassNames.image}`,
|
|
755
|
-
style: width && height ? { height: "100%", objectFit: "cover" } : void 0,
|
|
756
|
-
onLoad: () => setState("loaded"),
|
|
757
|
-
onError: () => setState("error")
|
|
758
|
-
}
|
|
759
|
-
),
|
|
760
|
-
state === "loading" && /* @__PURE__ */ jsx(
|
|
761
|
-
"span",
|
|
762
|
-
{
|
|
763
|
-
className: `${loader} ${semanticClassNames.loader}`
|
|
764
|
-
}
|
|
765
|
-
),
|
|
766
|
-
state === "error" && /* @__PURE__ */ jsx(
|
|
767
|
-
"span",
|
|
768
|
-
{
|
|
769
|
-
className: `${errorBadge} ${semanticClassNames.errorBadge}`,
|
|
770
|
-
children: "Image failed to load"
|
|
771
|
-
}
|
|
772
|
-
)
|
|
773
|
-
]
|
|
774
|
-
}
|
|
775
|
-
) }) }),
|
|
776
|
-
captionText && /* @__PURE__ */ jsx(
|
|
777
|
-
"figcaption",
|
|
778
|
-
{
|
|
779
|
-
className: `${caption} ${semanticClassNames.caption}`,
|
|
780
|
-
children: captionText
|
|
781
|
-
}
|
|
782
|
-
)
|
|
783
|
-
] });
|
|
784
|
-
};
|
|
785
663
|
function ReplacePopover() {
|
|
786
664
|
const replaceOpen = useAtomValue(replaceOpenAtom);
|
|
787
665
|
const { handleReplaceOpenChange } = useImageActions();
|
package/dist/static.mjs
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-renderer-image",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.41",
|
|
4
4
|
"description": "Image renderer with blurhash and lightbox",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
"lucide-react": "^0.574.0",
|
|
25
25
|
"react-photo-view": "^1.2.7",
|
|
26
26
|
"thumbhash": "^0.1.1",
|
|
27
|
-
"@haklex/rich-editor": "0.0.
|
|
28
|
-
"@haklex/rich-
|
|
29
|
-
"@haklex/rich-
|
|
27
|
+
"@haklex/rich-editor": "0.0.41",
|
|
28
|
+
"@haklex/rich-style-token": "0.0.41",
|
|
29
|
+
"@haklex/rich-editor-ui": "0.0.41"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@lexical/react": "^0.41.0",
|