notion-to-jsx 1.2.2 → 1.2.4

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)
             }
           )
         ]
@@ -600,17 +609,35 @@ var codeBlock = "styles_codeBlock__1qn42yc0";
 
 // src/components/Renderer/components/Code/CodeBlock.tsx
 import Prism from "prismjs";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 if (typeof window !== "undefined") {
   window.Prism = Prism;
 }
+var renderToken = (token, i) => {
+  if (typeof token === "string") {
+    return /* @__PURE__ */ jsx7("span", { children: token }, i);
+  }
+  const content3 = token.content;
+  let tokenContent;
+  if (Array.isArray(content3)) {
+    tokenContent = content3.map((subToken, j) => renderToken(subToken, j));
+  } else if (typeof content3 === "object" && content3 !== null) {
+    tokenContent = renderToken(content3, 0);
+  } else {
+    tokenContent = content3;
+  }
+  return /* @__PURE__ */ jsx7("span", { className: `token ${token.type}`, children: tokenContent }, i);
+};
 var CodeBlock = ({ code, language, caption: caption2 }) => {
-  const highlightedCode = useMemo(() => {
+  const tokens = useMemo(() => {
     const prismLanguage = Prism.languages[language] || Prism.languages.plaintext;
-    return Prism.highlight(code, prismLanguage, language);
+    return Prism.tokenize(code, prismLanguage);
   }, [code, language]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx7("pre", { className: codeBlock, children: /* @__PURE__ */ jsx7("code", { dangerouslySetInnerHTML: { __html: highlightedCode } }) }),
+    /* @__PURE__ */ jsx7("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ jsx7("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
     caption2 && /* @__PURE__ */ jsx7("figcaption", { children: /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts: caption2 }) })
   ] });
 };
@@ -666,7 +693,8 @@ var Column = ({ block, onFocus }) => {
     {
       block: childBlock,
       onFocus,
-      index
+      index,
+      isColumn: true
     },
     childBlock.id
   )) });
@@ -823,7 +851,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 +889,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":