notion-to-jsx 1.2.16 → 1.3.0

package/dist/index.js

@@ -35,7 +35,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Renderer/index.tsx
-var import_react7 = require("react");
+var import_react16 = require("react");
+
+// src/components/Renderer/components/List/ListItemGroup.tsx
+var import_react5 = require("react");
+
+// src/components/Renderer/components/List/List.tsx
+var import_react = require("react");
 
 // src/components/Renderer/components/List/styles.css.ts
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -44,25 +50,25 @@ var listItem = "styles_listItem__es8vim3";
 
 // src/components/Renderer/components/List/List.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var List = ({
+var List = (0, import_react.memo)(({
   as: Component = "ul",
   type,
-  className,
   children,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: list({ type }), ...props, children });
-};
-var ListItem = ({
-  className,
+});
+List.displayName = "List";
+var ListItem = (0, import_react.memo)(({
   children,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: listItem, ...props, children });
-};
+});
+ListItem.displayName = "ListItem";
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/Renderer/components/RichText/styles.css.ts
 var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -72,6 +78,30 @@ var richText = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName:
 
 // src/components/Renderer/components/RichText/RichTexts.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var NOTION_COLORS = [
+  "default",
+  "gray",
+  "brown",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "purple",
+  "pink",
+  "red",
+  "gray_background",
+  "brown_background",
+  "orange_background",
+  "yellow_background",
+  "green_background",
+  "blue_background",
+  "purple_background",
+  "pink_background",
+  "red_background"
+];
+var isNotionColor = (color) => {
+  return NOTION_COLORS.includes(color);
+};
 var renderLink = (href, content3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: link, children: content3 });
 var EmptyRichText = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: emptyRichText });
 var RichTexts = ({ richTexts }) => {
@@ -99,28 +129,7 @@ var RichTexts = ({ richTexts }) => {
         content3 = text.plain_text;
       }
     }
-    const notionColors = [
-      "default",
-      "gray",
-      "brown",
-      "orange",
-      "yellow",
-      "green",
-      "blue",
-      "purple",
-      "pink",
-      "red",
-      "gray_background",
-      "brown_background",
-      "orange_background",
-      "yellow_background",
-      "green_background",
-      "blue_background",
-      "purple_background",
-      "pink_background",
-      "red_background"
-    ];
-    const safeColor = notionColors.includes(color) ? color : void 0;
+    const safeColor = isNotionColor(color) ? color : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
       {
@@ -140,9 +149,6 @@ var RichTexts = ({ richTexts }) => {
 };
 var RichTexts_default = RichTexts;
 
-// src/components/Renderer/components/Image/Image.tsx
-var import_react = require("react");
-
 // src/components/Renderer/components/Image/styles.css.ts
 var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
 var caption = "styles_caption__2f3ncf7";
@@ -193,6 +199,26 @@ var Skeleton = ({
 };
 var Skeleton_default = Skeleton;
 
+// src/hooks/useImageLoad.ts
+var import_react2 = require("react");
+var useImageLoad = (src) => {
+  const [isLoaded, setIsLoaded] = (0, import_react2.useState)(false);
+  const imgRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalHeight !== 0) {
+      setIsLoaded(true);
+    }
+  }, [src]);
+  (0, import_react2.useEffect)(() => {
+    setIsLoaded(false);
+  }, [src]);
+  const handleLoad = (0, import_react2.useCallback)(() => {
+    setIsLoaded(true);
+  }, []);
+  return { isLoaded, imgRef, handleLoad };
+};
+
 // src/components/Renderer/components/Image/Image.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MAX_WIDTH = 720;
@@ -206,17 +232,7 @@ var Image = ({
   format,
   isColumn = false
 }) => {
-  const [isLoaded, setIsLoaded] = (0, import_react.useState)(false);
-  const imgRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    const img = imgRef.current;
-    if (img && img.complete && img.naturalHeight !== 0) {
-      setIsLoaded(true);
-    }
-  }, [src]);
-  const handleLoad = () => {
-    setIsLoaded(true);
-  };
+  const { isLoaded, imgRef, handleLoad } = useImageLoad(src);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: imageContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: imageWrapper, style: getImageStyles(format, isColumn), children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
@@ -305,7 +321,7 @@ var Bookmark = ({ url, metadata }) => {
 var Bookmark_default = Bookmark;
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
 var content2 = "styles_content__o1p3m12";
@@ -320,16 +336,19 @@ var title2 = "styles_title__o1p3m15";
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var fetchGitHubRepoData = async (repoPath) => {
+var fetchGitHubRepoData = async (repoPath, signal) => {
   try {
     const apiUrl = `https://api.github.com/repos/${repoPath}`;
-    const response = await fetch(apiUrl);
+    const response = await fetch(apiUrl, { signal });
     if (!response.ok) {
       throw new Error("Failed to fetch GitHub repo data");
     }
     const data = await response.json();
     return data;
   } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      return null;
+    }
     console.error("Error fetching GitHub repo data:", error);
     return null;
   }
@@ -343,10 +362,7 @@ var extractFigmaData = (url) => {
         (segment) => segment.includes("file")
       );
       if (!fileSegment) return null;
-      const fileIdMatch = fileSegment.match(/file\/([^/]+)/);
-      const fileId = fileIdMatch ? fileIdMatch[1] : "";
       let fileName = "";
-      let mode = "";
       if (pathSegments.length > 3) {
         const encodedName = pathSegments[3];
         if (encodedName) {
@@ -355,14 +371,10 @@ var extractFigmaData = (url) => {
       }
       if (!fileName && parsedUrl.pathname.includes("-")) {
         const nameMatch = parsedUrl.pathname.match(/\/([^/]+)(?:\?|$)/);
-        if (nameMatch && nameMatch[1]) {
+        if (nameMatch?.[1]) {
           fileName = decodeURIComponent(nameMatch[1].replace(/-/g, " "));
         }
       }
-      if (parsedUrl.search) {
-        const searchParams = new URLSearchParams(parsedUrl.search);
-        mode = searchParams.get("mode") || "";
-      }
       fileName = fileName || "Figma Design";
       return {
         name: fileName,
@@ -405,6 +417,20 @@ var getLinkType = (url) => {
     return "unknown";
   }
 };
+var MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
 var formatUpdatedTime = (dateString) => {
   const date = new Date(dateString);
   const now = /* @__PURE__ */ new Date();
@@ -413,39 +439,57 @@ var formatUpdatedTime = (dateString) => {
   );
   if (diffInHours < 24) {
     return `Updated ${diffInHours} hours ago`;
-  } else {
-    const diffInDays = Math.floor(diffInHours / 24);
-    if (diffInDays === 1) {
-      return "Updated yesterday";
-    } else if (diffInDays < 30) {
-      return `Updated ${diffInDays} days ago`;
-    } else {
-      const months = [
-        "Jan",
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-        "Nov",
-        "Dec"
-      ];
-      return `Updated on ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
-    }
   }
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays === 1) {
+    return "Updated yesterday";
+  }
+  if (diffInDays < 30) {
+    return `Updated ${diffInDays} days ago`;
+  }
+  return `Updated on ${MONTH_NAMES[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
 };
+var FigmaPreview = (0, import_react3.memo)(({ data }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: preview, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "img",
+    {
+      src: data.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
+      alt: "Figma icon",
+      className: icon
+    }
+  ) }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: content2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: data.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: description2, children: "www.figma.com" })
+  ] })
+] }));
+FigmaPreview.displayName = "FigmaPreview";
+var GitHubPreview = (0, import_react3.memo)(({ repoData, repoName, updatedTimeText, loading }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${preview} ${githubPreview}`, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "img",
+    {
+      src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
+      alt: "Repository icon",
+      className: icon
+    }
+  ) }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${content2} ${githubContent}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: repoName }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
+  ] })
+] }));
+GitHubPreview.displayName = "GitHubPreview";
+var DefaultPreview = (0, import_react3.memo)(({ url }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: preview, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: content2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: url }) }) }));
+DefaultPreview.displayName = "DefaultPreview";
 var LinkPreview = ({ url }) => {
-  const [repoData, setRepoData] = (0, import_react2.useState)(null);
-  const [figmaData, setFigmaData] = (0, import_react2.useState)(null);
-  const [loading, setLoading] = (0, import_react2.useState)(true);
-  const [linkType, setLinkType] = (0, import_react2.useState)(
+  const [repoData, setRepoData] = (0, import_react3.useState)(null);
+  const [figmaData, setFigmaData] = (0, import_react3.useState)(null);
+  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [linkType, setLinkType] = (0, import_react3.useState)(
     "unknown"
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
+    const abortController = new AbortController();
     const loadLinkData = async () => {
       setLoading(true);
       const type = getLinkType(url);
@@ -453,19 +497,45 @@ var LinkPreview = ({ url }) => {
       if (type === "github") {
         const repoPath = extractRepoPathFromUrl(url);
         if (repoPath) {
-          const data = await fetchGitHubRepoData(repoPath);
-          setRepoData(data);
+          const data = await fetchGitHubRepoData(repoPath, abortController.signal);
+          if (!abortController.signal.aborted) {
+            setRepoData(data);
+          }
         }
       } else if (type === "figma") {
         const data = extractFigmaData(url);
-        setFigmaData(data);
+        if (!abortController.signal.aborted) {
+          setFigmaData(data);
+        }
+      }
+      if (!abortController.signal.aborted) {
+        setLoading(false);
       }
-      setLoading(false);
     };
     loadLinkData();
+    return () => {
+      abortController.abort();
+    };
   }, [url]);
   const repoName = repoData?.name || extractRepoPathFromUrl(url)?.split("/")[1] || "Repository";
   const updatedTimeText = repoData?.updated_at ? formatUpdatedTime(repoData.updated_at) : "";
+  const renderPreview = () => {
+    if (linkType === "figma" && figmaData) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FigmaPreview, { data: figmaData });
+    }
+    if (linkType === "github") {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        GitHubPreview,
+        {
+          repoData,
+          repoName,
+          updatedTimeText,
+          loading
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DefaultPreview, { url });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "a",
     {
@@ -473,58 +543,31 @@ var LinkPreview = ({ url }) => {
       target: "_blank",
       rel: "noopener noreferrer",
       className: link3,
-      children: linkType === "figma" && figmaData ? (
-        // Figma 프리뷰 렌더링
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: preview, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "img",
-            {
-              src: figmaData.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
-              alt: "Figma icon",
-              className: icon
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: content2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: figmaData.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: description2, children: "www.figma.com" })
-          ] })
-        ] })
-      ) : linkType === "github" ? (
-        // GitHub 프리뷰 렌더링
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${preview} ${githubPreview}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "img",
-            {
-              src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
-              alt: "Repository icon",
-              className: icon
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${content2} ${githubContent}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: repoName }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
-          ] })
-        ] })
-      ) : (
-        // 기본 링크 프리뷰 렌더링
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: preview, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: content2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: url }) }) })
-      )
+      children: renderPreview()
     }
   );
 };
 var LinkPreview_default = LinkPreview;
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var MemoizedRichText = (0, import_react3.memo)(RichTexts_default, (prev, next) => {
-  return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
+var areRichTextsEqual = (prev, next) => {
+  if (prev === next) return true;
+  if (!prev || !next) return prev === next;
+  if (prev.length !== next.length) return false;
+  return prev.every(
+    (item, i) => item.plain_text === next[i]?.plain_text && item.href === next[i]?.href && item.annotations?.bold === next[i]?.annotations?.bold && item.annotations?.italic === next[i]?.annotations?.italic && item.annotations?.code === next[i]?.annotations?.code && item.annotations?.color === next[i]?.annotations?.color
+  );
+};
+var MemoizedRichText = (0, import_react4.memo)(RichTexts_default, (prev, next) => {
+  return areRichTextsEqual(prev.richTexts, next.richTexts);
 });
-var MemoizedImage = (0, import_react3.memo)(Image_default, (prev, next) => {
-  return prev.src === next.src && prev.alt === next.alt && JSON.stringify(prev.caption) === JSON.stringify(next.caption);
+var MemoizedImage = (0, import_react4.memo)(Image_default, (prev, next) => {
+  return prev.src === next.src && prev.alt === next.alt && areRichTextsEqual(prev.caption, next.caption);
 });
-var MemoizedBookmark = (0, import_react3.memo)(Bookmark_default, (prev, next) => {
+var MemoizedBookmark = (0, import_react4.memo)(Bookmark_default, (prev, next) => {
   return prev.url === next.url;
 });
-var MemoizedLinkPreview = (0, import_react3.memo)(
+var MemoizedLinkPreview = (0, import_react4.memo)(
   LinkPreview_default,
   (prev, next) => {
     return prev.url === next.url;
@@ -533,7 +576,7 @@ var MemoizedLinkPreview = (0, import_react3.memo)(
 
 // src/components/Renderer/components/List/ListItemGroup.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var RecursiveListItem = ({ block, renderBlock }) => {
+var RecursiveListItem = (0, import_react5.memo)(({ block, renderBlock }) => {
   let content3;
   if (block.type === "bulleted_list_item") {
     content3 = block.bulleted_list_item;
@@ -593,8 +636,9 @@ var RecursiveListItem = ({ block, renderBlock }) => {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MemoizedRichText, { richTexts }),
     renderedChildren.length > 0 && renderedChildren
   ] });
-};
-var ListGroup = ({ blocks, type, renderBlock }) => {
+});
+RecursiveListItem.displayName = "RecursiveListItem";
+var ListGroup = (0, import_react5.memo)(({ blocks, type, renderBlock }) => {
   if (blocks.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     List,
@@ -613,10 +657,14 @@ var ListGroup = ({ blocks, type, renderBlock }) => {
       ))
     }
   );
-};
+});
+ListGroup.displayName = "ListGroup";
+
+// src/components/Renderer/components/Block/BlockRenderer.tsx
+var import_react15 = require("react");
 
 // src/components/Renderer/components/Code/CodeBlock.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/components/Renderer/components/Code/styles.css.ts
 var codeBlock = "styles_codeBlock__1qn42yc0";
@@ -645,8 +693,8 @@ var renderToken = (token, i) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `token ${token.type}`, children: tokenContent }, i);
 };
-var CodeBlock = ({ code, language, caption: caption2 }) => {
-  const tokens = (0, import_react4.useMemo)(() => {
+var CodeBlock = (0, import_react6.memo)(({ code, language, caption: caption2 }) => {
+  const tokens = (0, import_react6.useMemo)(() => {
     const prismLanguage = import_prismjs.default.languages[language] || import_prismjs.default.languages.plaintext;
     return import_prismjs.default.tokenize(code, prismLanguage);
   }, [code, language]);
@@ -654,9 +702,13 @@ var CodeBlock = ({ code, language, caption: caption2 }) => {
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
     caption2 && caption2.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("figcaption", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MemoizedRichText, { richTexts: caption2 }) })
   ] });
-};
+});
+CodeBlock.displayName = "CodeBlock";
 var CodeBlock_default = CodeBlock;
 
+// src/components/Renderer/components/Typography/Typography.tsx
+var import_react7 = require("react");
+
 // src/components/Renderer/components/Typography/styles.css.ts
 var heading1 = "styles_heading1__90a95g1";
 var heading2 = "styles_heading2__90a95g2";
@@ -665,34 +717,25 @@ var paragraph = "styles_paragraph__90a95g0";
 
 // src/components/Renderer/components/Typography/Typography.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Paragraph = ({
-  className,
-  children,
-  ...props
-}) => {
+var Paragraph = (0, import_react7.memo)(({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: paragraph, ...props, children });
-};
-var Heading1 = ({
-  className,
-  children,
-  ...props
-}) => {
+});
+Paragraph.displayName = "Paragraph";
+var Heading1 = (0, import_react7.memo)(({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: heading1, ...props, children });
-};
-var Heading2 = ({
-  className,
-  children,
-  ...props
-}) => {
+});
+Heading1.displayName = "Heading1";
+var Heading2 = (0, import_react7.memo)(({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: heading2, ...props, children });
-};
-var Heading3 = ({
-  className,
-  children,
-  ...props
-}) => {
+});
+Heading2.displayName = "Heading2";
+var Heading3 = (0, import_react7.memo)(({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: heading3, ...props, children });
-};
+});
+Heading3.displayName = "Heading3";
+
+// src/components/Renderer/components/Column/Column.tsx
+var import_react8 = require("react");
 
 // src/components/Renderer/components/Column/styles.css.ts
 var columnContainer = "styles_columnContainer__wle6we0";
@@ -700,30 +743,40 @@ var columnListContainer = "styles_columnListContainer__wle6we1";
 
 // src/components/Renderer/components/Column/Column.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Column = ({ block }) => {
+var Column = (0, import_react8.memo)(({ block }) => {
   if (!block || !block.children) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: columnContainer, children: block.children.map((childBlock) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BlockRenderer_default, { block: childBlock, isColumn: true }, childBlock.id)) });
-};
+});
+Column.displayName = "Column";
 var Column_default = Column;
 
 // src/components/Renderer/components/Column/ColumnList.tsx
+var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ColumnList = ({ block }) => {
+var ColumnList = (0, import_react9.memo)(({ block }) => {
   if (!block || !block.children) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Column_default, { block: column }, column.id)) });
-};
+});
+ColumnList.displayName = "ColumnList";
 var ColumnList_default = ColumnList;
 
+// src/components/Renderer/components/Quote/Quote.tsx
+var import_react10 = require("react");
+
 // src/components/Renderer/components/Quote/styles.css.ts
 var container = "styles_container__mra9n0";
 
 // src/components/Renderer/components/Quote/Quote.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Quote = ({ richTexts, tabIndex }) => {
+var Quote = (0, import_react10.memo)(({ richTexts, tabIndex }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("blockquote", { className: container, tabIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MemoizedRichText, { richTexts }) });
-};
+});
+Quote.displayName = "Quote";
 var Quote_default = Quote;
 
+// src/components/Renderer/components/Table/Table.tsx
+var import_react12 = require("react");
+
 // src/components/Renderer/components/Table/styles.css.ts
 var firstCell = "styles_firstCell__1rvbzfo4";
 var hasRowHeader = "styles_hasRowHeader__1rvbzfo6";
@@ -734,8 +787,9 @@ var tableCell = "styles_tableCell__1rvbzfo3";
 var tableContainer = "styles_tableContainer__1rvbzfo0";
 
 // src/components/Renderer/components/Table/TableRow.tsx
+var import_react11 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var TableRow = ({
+var TableRow = (0, import_react11.memo)(({
   rowBlock,
   cellClassName = "",
   rowHeaderIndex = -1
@@ -761,12 +815,13 @@ var TableRow = ({
       `${rowBlock.id}-cell-${index}`
     );
   }) });
-};
+});
+TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Renderer/components/Table/Table.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Table = ({ block }) => {
+var Table = (0, import_react12.memo)(({ block }) => {
   if (!block.table || !block.children) {
     return null;
   }
@@ -788,14 +843,15 @@ var Table = ({ block }) => {
       );
     }) })
   ] }) }) });
-};
+});
+Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Renderer/components/Table/index.ts
 var Table_default2 = Table_default;
 
 // src/components/Renderer/components/Toggle/Toggle.tsx
-var import_react5 = require("react");
+var import_react13 = require("react");
 
 // src/components/Renderer/components/Toggle/styles.css.ts
 var toggleContainer = "styles_toggleContainer__p7ue1z0";
@@ -807,7 +863,7 @@ var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
 // src/components/Renderer/components/Toggle/Toggle.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Toggle = ({ block }) => {
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
   if (!block.toggle || !block.children) {
     return null;
   }
@@ -840,6 +896,9 @@ var Toggle = ({ block }) => {
 };
 var Toggle_default = Toggle;
 
+// src/components/Renderer/components/Video/Video.tsx
+var import_react14 = require("react");
+
 // src/components/Renderer/components/Video/styles.css.ts
 var videoCaption = "styles_videoCaption__15b9vkb2";
 var videoContainer = "styles_videoContainer__15b9vkb0";
@@ -847,7 +906,7 @@ var videoPlayer = "styles_videoPlayer__15b9vkb1";
 
 // src/components/Renderer/components/Video/Video.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Video = ({ block }) => {
+var Video = (0, import_react14.memo)(({ block }) => {
   if (block.type !== "video" || !block.video) {
     return null;
   }
@@ -876,19 +935,19 @@ var Video = ({ block }) => {
     ] }),
     caption2 && caption2.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("figcaption", { className: videoCaption, children: caption2.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: c.plain_text }, i)) })
   ] });
-};
+});
+Video.displayName = "Video";
+var YOUTUBE_SHORT_URL_REGEX = /youtu\.be\/([a-zA-Z0-9_-]+)/;
+var YOUTUBE_WATCH_URL_REGEX = /youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/;
 var getVideoEmbedUrl = (url) => {
   if (!url) return "";
-  if (url.includes("youtu.be/")) {
-    const videoId = url.split("youtu.be/")[1]?.split("?")[0];
-    if (videoId) {
-      return `https://www.youtube.com/embed/${videoId}`;
-    }
-  } else if (url.includes("youtube.com/watch?v=")) {
-    const videoId = url.split("watch?v=")[1]?.split("&")[0];
-    if (videoId) {
-      return `https://www.youtube.com/embed/${videoId}`;
-    }
+  const shortMatch = url.match(YOUTUBE_SHORT_URL_REGEX);
+  if (shortMatch?.[1]) {
+    return `https://www.youtube.com/embed/${shortMatch[1]}`;
+  }
+  const watchMatch = url.match(YOUTUBE_WATCH_URL_REGEX);
+  if (watchMatch?.[1]) {
+    return `https://www.youtube.com/embed/${watchMatch[1]}`;
   }
   return url;
 };
@@ -896,7 +955,7 @@ var Video_default = Video;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var BlockRenderer = ({ block, isColumn = false }) => {
+var BlockRenderer = (0, import_react15.memo)(({ block, isColumn = false }) => {
   if (!block) return null;
   switch (block.type) {
     case "link_preview":
@@ -952,7 +1011,8 @@ var BlockRenderer = ({ block, isColumn = false }) => {
     default:
       return null;
   }
-};
+});
+BlockRenderer.displayName = "BlockRenderer";
 var BlockRenderer_default = BlockRenderer;
 
 // src/components/Title/index.tsx
@@ -962,9 +1022,6 @@ var Title = ({ title: title3 }) => {
 };
 var Title_default = Title;
 
-// src/components/Cover/index.tsx
-var import_react6 = require("react");
-
 // src/components/Cover/styles.css.ts
 var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
 var coverContainer = "styles_coverContainer__p0cp8d0";
@@ -974,17 +1031,7 @@ var skeletonWrapper2 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultCla
 // src/components/Cover/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Cover = ({ src, alt }) => {
-  const [isLoaded, setIsLoaded] = (0, import_react6.useState)(false);
-  const imgRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
-    const img = imgRef.current;
-    if (img && img.complete && img.naturalHeight !== 0) {
-      setIsLoaded(true);
-    }
-  }, [src]);
-  const handleLoad = () => {
-    setIsLoaded(true);
-  };
+  const { isLoaded, imgRef, handleLoad } = useImageLoad(src);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: coverContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1011,9 +1058,13 @@ var lightTheme = "theme_lightTheme__sq3jkb1m";
 
 // src/components/Renderer/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Renderer = (0, import_react7.memo)(({ blocks, isDarkMode = false, title: title3, cover }) => {
+var Renderer = (0, import_react16.memo)(({ blocks, isDarkMode = false, title: title3, cover }) => {
   const theme = isDarkMode ? darkTheme : lightTheme;
-  const renderedBlocks = (0, import_react7.useMemo)(() => {
+  const renderBlock = (0, import_react16.useCallback)(
+    (childBlock) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BlockRenderer_default, { block: childBlock }),
+    []
+  );
+  const renderedBlocks = (0, import_react16.useMemo)(() => {
     const result = [];
     for (let i = 0; i < blocks.length; i++) {
       const block = blocks[i];
@@ -1035,7 +1086,7 @@ var Renderer = (0, import_react7.memo)(({ blocks, isDarkMode = false, title: tit
               {
                 blocks: listItems,
                 type: listItemType,
-                renderBlock: (childBlock) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BlockRenderer_default, { block: childBlock })
+                renderBlock
               },
               block.id
             )
@@ -1052,7 +1103,7 @@ var Renderer = (0, import_react7.memo)(({ blocks, isDarkMode = false, title: tit
       }
     }
     return result;
-  }, [blocks]);
+  }, [blocks, renderBlock]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     cover && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(