notion-to-jsx 1.2.2 → 1.2.3

package/dist/index.mjs

@@ -116,62 +116,71 @@ var styledImage = _7a4683({ defaultClassName: "styles_styledImage__2f3ncf6", var
 // src/components/Renderer/components/Image/Image.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var MAX_WIDTH = 720;
+var getImageStyles = (format, isColumn = false) => {
+  const getWidthStyle = () => {
+    if (!isColumn && format?.block_aspect_ratio && format.block_aspect_ratio < 1) {
+      return `${format.block_aspect_ratio * 100}%`;
+    }
+    if (format?.block_width) {
+      return format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px`;
+    }
+    return "100%";
+  };
+  const getAspectRatioStyle = () => {
+    return format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto";
+  };
+  return {
+    width: getWidthStyle(),
+    aspectRatio: getAspectRatioStyle()
+  };
+};
+var getImageTagStyle = (format) => {
+  return format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0;
+};
 var Image = ({
   src,
   alt,
   caption: imageCaption,
-  priority = false,
-  format
+  format,
+  isColumn = false
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
     setIsLoaded(false);
   }, [src]);
-  return /* @__PURE__ */ jsxs("figure", { className: imageContainer, children: [
+  return /* @__PURE__ */ jsxs("div", { className: imageContainer, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: imageWrapper({
           hasWidth: !!format?.block_width
         }),
-        style: {
-          width: format?.block_aspect_ratio && format.block_aspect_ratio < 1 ? `${format.block_aspect_ratio * 100}%` : format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%"
-        },
+        style: getImageStyles(format, isColumn),
         children: [
-          !isLoaded && /* @__PURE__ */ jsx3(
-            "div",
+          !isLoaded && /* @__PURE__ */ jsx3("div", { className: placeholder, style: getImageStyles(format, isColumn), children: /* @__PURE__ */ jsx3(
+            "svg",
             {
-              className: placeholder,
-              style: {
-                width: format?.block_aspect_ratio && format.block_aspect_ratio < 1 ? `${format.block_aspect_ratio * 100}%` : format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%",
-                aspectRatio: format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto"
-              },
-              children: /* @__PURE__ */ jsx3(
-                "svg",
-                {
-                  width: "38",
-                  height: "38",
-                  viewBox: "0 0 38 38",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  stroke: "#888",
-                  children: /* @__PURE__ */ jsx3("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-                    /* @__PURE__ */ jsx3("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
-                    /* @__PURE__ */ jsx3("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx3(
-                      "animateTransform",
-                      {
-                        attributeName: "transform",
-                        type: "rotate",
-                        from: "0 18 18",
-                        to: "360 18 18",
-                        dur: "1s",
-                        repeatCount: "indefinite"
-                      }
-                    ) })
-                  ] }) })
-                }
-              )
+              width: "38",
+              height: "38",
+              viewBox: "0 0 38 38",
+              xmlns: "http://www.w3.org/2000/svg",
+              stroke: "#888",
+              children: /* @__PURE__ */ jsx3("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx3("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
+                /* @__PURE__ */ jsx3("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx3(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0 18 18",
+                    to: "360 18 18",
+                    dur: "1s",
+                    repeatCount: "indefinite"
+                  }
+                ) })
+              ] }) })
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx3(
             "img",
             {
@@ -181,11 +190,11 @@ var Image = ({
               }),
               src,
               alt,
-              loading: priority ? "eager" : "lazy",
+              loading: "lazy",
               onLoad: () => setIsLoaded(true),
               width: format?.block_width,
               height: format?.block_height,
-              style: format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0
+              style: getImageTagStyle(format)
             }
           )
         ]
@@ -666,7 +675,8 @@ var Column = ({ block, onFocus }) => {
     {
       block: childBlock,
       onFocus,
-      index
+      index,
+      isColumn: true
     },
     childBlock.id
   )) });
@@ -823,7 +833,12 @@ var Toggle_default = Toggle;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-var BlockRenderer = ({ block, onFocus, index }) => {
+var BlockRenderer = ({
+  block,
+  onFocus,
+  index,
+  isColumn = false
+}) => {
   if (!block) return null;
   const blockProps = {
     tabIndex: 0,
@@ -856,7 +871,8 @@ var BlockRenderer = ({ block, onFocus, index }) => {
           src: block.image.file?.url || block.image.external?.url,
           alt: block.image.caption?.[0]?.plain_text || "",
           caption: block.image.caption,
-          format: block.image.format
+          format: block.image.format,
+          isColumn
         }
       ) });
     case "bookmark":