notion-to-jsx 1.2.13 → 1.2.14
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/index.js +24 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -6
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -207,12 +207,23 @@ var Image = ({
|
|
|
207
207
|
isColumn = false
|
|
208
208
|
}) => {
|
|
209
209
|
const [isLoaded, setIsLoaded] = (0, import_react.useState)(false);
|
|
210
|
+
const imgRef = (0, import_react.useRef)(null);
|
|
211
|
+
(0, import_react.useEffect)(() => {
|
|
212
|
+
const img = imgRef.current;
|
|
213
|
+
if (img && img.complete && img.naturalHeight !== 0) {
|
|
214
|
+
setIsLoaded(true);
|
|
215
|
+
}
|
|
216
|
+
}, [src]);
|
|
217
|
+
const handleLoad = () => {
|
|
218
|
+
setIsLoaded(true);
|
|
219
|
+
};
|
|
210
220
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: imageContainer, children: [
|
|
211
221
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: imageWrapper, style: getImageStyles(format, isColumn), children: [
|
|
212
222
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
|
|
213
223
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
214
224
|
"img",
|
|
215
225
|
{
|
|
226
|
+
ref: imgRef,
|
|
216
227
|
className: imageStyle({
|
|
217
228
|
loaded: isLoaded,
|
|
218
229
|
hasAspectRatio: !!format?.block_aspect_ratio
|
|
@@ -220,7 +231,7 @@ var Image = ({
|
|
|
220
231
|
src,
|
|
221
232
|
alt,
|
|
222
233
|
loading: "lazy",
|
|
223
|
-
onLoad:
|
|
234
|
+
onLoad: handleLoad,
|
|
224
235
|
width: format?.block_width,
|
|
225
236
|
height: format?.block_height,
|
|
226
237
|
style: getImageTagStyle(format)
|
|
@@ -964,15 +975,26 @@ var skeletonWrapper2 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultCla
|
|
|
964
975
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
965
976
|
var Cover = ({ src, alt }) => {
|
|
966
977
|
const [isLoaded, setIsLoaded] = (0, import_react6.useState)(false);
|
|
978
|
+
const imgRef = (0, import_react6.useRef)(null);
|
|
979
|
+
(0, import_react6.useEffect)(() => {
|
|
980
|
+
const img = imgRef.current;
|
|
981
|
+
if (img && img.complete && img.naturalHeight !== 0) {
|
|
982
|
+
setIsLoaded(true);
|
|
983
|
+
}
|
|
984
|
+
}, [src]);
|
|
985
|
+
const handleLoad = () => {
|
|
986
|
+
setIsLoaded(true);
|
|
987
|
+
};
|
|
967
988
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: coverContainer, children: [
|
|
968
989
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
|
|
969
990
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
970
991
|
"img",
|
|
971
992
|
{
|
|
993
|
+
ref: imgRef,
|
|
972
994
|
src,
|
|
973
995
|
alt,
|
|
974
996
|
className: imageStyle2({ isLoaded }),
|
|
975
|
-
onLoad:
|
|
997
|
+
onLoad: handleLoad,
|
|
976
998
|
loading: "lazy"
|
|
977
999
|
}
|
|
978
1000
|
)
|