notion-to-jsx 1.2.5 → 1.2.7

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Renderer/index.tsx
-import React7, { useState as useState5, useMemo as useMemo2, useCallback } from "react";
+import React6, { useState as useState4, useMemo as useMemo2, useCallback } from "react";
 
 // src/components/Renderer/styles.css.ts
 var container = "styles_container__epva5u0";
@@ -29,7 +29,7 @@ var ListItem = ({
 };
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-import React4 from "react";
+import React3 from "react";
 
 // src/components/Renderer/components/RichText/styles.css.ts
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -103,7 +103,7 @@ var RichTexts = ({ richTexts }) => {
 var RichTexts_default = RichTexts;
 
 // src/components/Renderer/components/Image/Image.tsx
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 // src/components/Renderer/components/Image/styles.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -145,9 +145,6 @@ var Image = ({
   isColumn = false
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
-  useEffect(() => {
-    setIsLoaded(false);
-  }, [src]);
   return /* @__PURE__ */ jsxs("div", { className: imageContainer, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -205,9 +202,6 @@ var Image = ({
 };
 var Image_default = Image;
 
-// src/components/Renderer/components/Bookmark/Bookmark.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
-
 // src/components/Renderer/components/Bookmark/styles.css.ts
 var card = "styles_card__qrq8yf1";
 var content = "styles_content__qrq8yf2";
@@ -222,73 +216,24 @@ var urlText = "styles_urlText__qrq8yf9";
 
 // src/components/Renderer/components/Bookmark/Bookmark.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var fetchOpenGraphData = async (url) => {
-  try {
-    const apiUrl = `https://api.microlink.io/?url=${encodeURIComponent(url)}`;
-    const response = await fetch(apiUrl);
-    const data = await response.json();
-    if (!response.ok) {
-      throw new Error("Failed to fetch metadata");
-    }
-    const { status, data: metaData, statusCode } = data;
-    if (status !== "success" || statusCode !== 200) {
-      throw new Error("API returned error status");
-    }
-    const parsedUrl = new URL(url);
-    const domain = parsedUrl.hostname;
-    return {
-      title: metaData.title || domain,
-      description: metaData.description || "No description available",
-      image: metaData.image?.url || "",
-      siteName: metaData.publisher || domain,
-      url: metaData.url || "",
-      favicon: metaData.logo?.url || `https://www.google.com/s2/favicons?domain=${domain}&sz=64`
-    };
-  } catch (error) {
-    console.error("Error fetching OpenGraph data:", error);
-    const parsedUrl = new URL(url);
-    const domain = parsedUrl.hostname;
-    return {
-      title: domain,
-      description: "No description available",
-      image: "",
-      url: "",
-      siteName: domain,
-      favicon: `https://www.google.com/s2/favicons?domain=${domain}&sz=64`
-    };
-  }
-};
-var Bookmark = ({ url }) => {
-  const [ogData, setOgData] = useState2(null);
-  const [error, setError] = useState2(false);
-  useEffect2(() => {
-    const loadOgData = async () => {
-      try {
-        const data = await fetchOpenGraphData(url);
-        setOgData(data);
-      } catch (err) {
-        setError(true);
-      }
-    };
-    loadOgData();
-  }, [url]);
+var Bookmark = ({ url, metadata }) => {
   return /* @__PURE__ */ jsx4("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link2, children: /* @__PURE__ */ jsxs2("div", { className: card, children: [
     /* @__PURE__ */ jsxs2("div", { className: content, children: [
       /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx4("h4", { className: title, children: ogData?.title || url }),
-        /* @__PURE__ */ jsx4("p", { className: description, children: ogData?.description || "" })
+        /* @__PURE__ */ jsx4("h4", { className: title, children: metadata?.title || url }),
+        /* @__PURE__ */ jsx4("p", { className: description, children: metadata?.description || "" })
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: siteName, children: [
-        ogData?.favicon && /* @__PURE__ */ jsx4("img", { src: ogData.favicon, alt: "", className: favicon }),
-        /* @__PURE__ */ jsx4("span", { className: urlText, children: ogData?.url || "" })
+        metadata?.favicon && /* @__PURE__ */ jsx4("img", { src: metadata.favicon, alt: "", className: favicon }),
+        /* @__PURE__ */ jsx4("span", { className: urlText, children: metadata?.url || "" })
       ] })
     ] }),
-    ogData?.image && /* @__PURE__ */ jsx4("div", { className: previewContainer, children: /* @__PURE__ */ jsx4(
+    metadata?.image && /* @__PURE__ */ jsx4("div", { className: previewContainer, children: /* @__PURE__ */ jsx4(
       "img",
       {
         className: previewImage,
-        src: ogData.image,
-        alt: ogData.title,
+        src: metadata.image,
+        alt: metadata.title,
         loading: "lazy",
         onError: (e) => {
           const target = e.target;
@@ -301,7 +246,7 @@ var Bookmark = ({ url }) => {
 var Bookmark_default = Bookmark;
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-import { useState as useState3, useEffect as useEffect3 } from "react";
+import { useState as useState2, useEffect } from "react";
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
 var content2 = "styles_content__o1p3m12";
@@ -435,13 +380,13 @@ var formatUpdatedTime = (dateString) => {
   }
 };
 var LinkPreview = ({ url }) => {
-  const [repoData, setRepoData] = useState3(null);
-  const [figmaData, setFigmaData] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  const [linkType, setLinkType] = useState3(
+  const [repoData, setRepoData] = useState2(null);
+  const [figmaData, setFigmaData] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [linkType, setLinkType] = useState2(
     "unknown"
   );
-  useEffect3(() => {
+  useEffect(() => {
     const loadLinkData = async () => {
       setLoading(true);
       const type = getLinkType(url);
@@ -511,22 +456,22 @@ var LinkPreview = ({ url }) => {
 var LinkPreview_default = LinkPreview;
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var MemoizedRichText = React4.memo(
+var MemoizedRichText = React3.memo(
   RichTexts_default,
   (prev, next) => {
     return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
   }
 );
-var MemoizedImage = React4.memo(Image_default, (prev, next) => {
+var MemoizedImage = React3.memo(Image_default, (prev, next) => {
   return prev.src === next.src && prev.alt === next.alt && JSON.stringify(prev.caption) === JSON.stringify(next.caption);
 });
-var MemoizedBookmark = React4.memo(
+var MemoizedBookmark = React3.memo(
   Bookmark_default,
   (prev, next) => {
     return prev.url === next.url;
   }
 );
-var MemoizedLinkPreview = React4.memo(
+var MemoizedLinkPreview = React3.memo(
   LinkPreview_default,
   (prev, next) => {
     return prev.url === next.url;
@@ -795,7 +740,7 @@ var Table_default = Table;
 var Table_default2 = Table_default;
 
 // src/components/Renderer/components/Toggle/Toggle.tsx
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 
 // src/components/Renderer/components/Toggle/styles.css.ts
 var toggleContainer = "styles_toggleContainer__p7ue1z0";
@@ -807,7 +752,7 @@ var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
 // src/components/Renderer/components/Toggle/Toggle.tsx
 import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var Toggle = ({ block, tabIndex = 0, onFocus }) => {
-  const [isOpen, setIsOpen] = useState4(false);
+  const [isOpen, setIsOpen] = useState3(false);
   if (!block.toggle || !block.children) {
     return null;
   }
@@ -894,7 +839,13 @@ var BlockRenderer = ({
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ jsx15(MemoizedBookmark, { url: block.bookmark.url });
+      return /* @__PURE__ */ jsx15(
+        MemoizedBookmark,
+        {
+          url: block.bookmark.url,
+          metadata: block.bookmark.metadata
+        }
+      );
     case "column_list":
       return /* @__PURE__ */ jsx15(ColumnList_default, { block, onFocus });
     case "column":
@@ -941,10 +892,10 @@ var Cover_default = Cover;
 
 // src/components/Renderer/index.tsx
 import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
-var Renderer = React7.memo(
+var Renderer = React6.memo(
   ({ blocks, isDarkMode = false, title: title3, cover: cover2, onBlockFocus }) => {
     const theme = isDarkMode ? darkTheme : lightTheme;
-    const [focusedIndex, setFocusedIndex] = useState5(-1);
+    const [focusedIndex, setFocusedIndex] = useState4(-1);
     const handleBlockFocus = useCallback(
       (index) => {
         setFocusedIndex(index);