notion-to-jsx 1.2.16 → 1.3.0

package/dist/index.mjs

@@ -1,5 +1,11 @@
 // src/components/Renderer/index.tsx
-import { useMemo as useMemo2, memo as memo2 } from "react";
+import { useMemo as useMemo2, memo as memo14, useCallback as useCallback2 } from "react";
+
+// src/components/Renderer/components/List/ListItemGroup.tsx
+import { memo as memo4 } from "react";
+
+// src/components/Renderer/components/List/List.tsx
+import { memo } from "react";
 
 // src/components/Renderer/components/List/styles.css.ts
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -8,25 +14,25 @@ var listItem = "styles_listItem__es8vim3";
 
 // src/components/Renderer/components/List/List.tsx
 import { jsx } from "react/jsx-runtime";
-var List = ({
+var List = memo(({
   as: Component = "ul",
   type,
-  className,
   children,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(Component, { className: list({ type }), ...props, children });
-};
-var ListItem = ({
-  className,
+});
+List.displayName = "List";
+var ListItem = memo(({
   children,
   ...props
 }) => {
   return /* @__PURE__ */ jsx("li", { className: listItem, ...props, children });
-};
+});
+ListItem.displayName = "ListItem";
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-import { memo } from "react";
+import { memo as memo3 } from "react";
 
 // src/components/Renderer/components/RichText/styles.css.ts
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -36,6 +42,30 @@ var richText = _7a4682({ defaultClassName: "styles__fdf3tw0", variantClassNames:
 
 // src/components/Renderer/components/RichText/RichTexts.tsx
 import { Fragment, jsx as jsx2 } from "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__ */ jsx2("a", { href, target: "_blank", rel: "noopener noreferrer", className: link, children: content3 });
 var EmptyRichText = () => /* @__PURE__ */ jsx2("div", { className: emptyRichText });
 var RichTexts = ({ richTexts }) => {
@@ -63,28 +93,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__ */ jsx2(
       "span",
       {
@@ -104,9 +113,6 @@ var RichTexts = ({ richTexts }) => {
 };
 var RichTexts_default = RichTexts;
 
-// src/components/Renderer/components/Image/Image.tsx
-import { useState, useRef, useEffect } from "react";
-
 // src/components/Renderer/components/Image/styles.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
 var caption = "styles_caption__2f3ncf7";
@@ -157,6 +163,26 @@ var Skeleton = ({
 };
 var Skeleton_default = Skeleton;
 
+// src/hooks/useImageLoad.ts
+import { useState, useRef, useEffect, useCallback } from "react";
+var useImageLoad = (src) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalHeight !== 0) {
+      setIsLoaded(true);
+    }
+  }, [src]);
+  useEffect(() => {
+    setIsLoaded(false);
+  }, [src]);
+  const handleLoad = useCallback(() => {
+    setIsLoaded(true);
+  }, []);
+  return { isLoaded, imgRef, handleLoad };
+};
+
 // src/components/Renderer/components/Image/Image.tsx
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var MAX_WIDTH = 720;
@@ -170,17 +196,7 @@ var Image = ({
   format,
   isColumn = false
 }) => {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const imgRef = useRef(null);
-  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__ */ jsxs("div", { className: imageContainer, children: [
     /* @__PURE__ */ jsxs("div", { className: imageWrapper, style: getImageStyles(format, isColumn), children: [
       /* @__PURE__ */ jsx4("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ jsx4(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
@@ -269,7 +285,7 @@ var Bookmark = ({ url, metadata }) => {
 var Bookmark_default = Bookmark;
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2, memo as memo2 } from "react";
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
 var content2 = "styles_content__o1p3m12";
@@ -284,16 +300,19 @@ var title2 = "styles_title__o1p3m15";
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "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;
   }
@@ -307,10 +326,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) {
@@ -319,14 +335,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,
@@ -369,6 +381,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();
@@ -377,31 +403,48 @@ 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 = memo2(({ data }) => /* @__PURE__ */ jsxs3("div", { className: preview, children: [
+  /* @__PURE__ */ jsx6("div", { className: iconContainer, children: /* @__PURE__ */ jsx6(
+    "img",
+    {
+      src: data.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
+      alt: "Figma icon",
+      className: icon
+    }
+  ) }),
+  /* @__PURE__ */ jsxs3("div", { className: content2, children: [
+    /* @__PURE__ */ jsx6("div", { className: title2, children: data.name }),
+    /* @__PURE__ */ jsx6("div", { className: description2, children: "www.figma.com" })
+  ] })
+] }));
+FigmaPreview.displayName = "FigmaPreview";
+var GitHubPreview = memo2(({ repoData, repoName, updatedTimeText, loading }) => /* @__PURE__ */ jsxs3("div", { className: `${preview} ${githubPreview}`, children: [
+  /* @__PURE__ */ jsx6("div", { className: iconContainer, children: /* @__PURE__ */ jsx6(
+    "img",
+    {
+      src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
+      alt: "Repository icon",
+      className: icon
+    }
+  ) }),
+  /* @__PURE__ */ jsxs3("div", { className: `${content2} ${githubContent}`, children: [
+    /* @__PURE__ */ jsx6("div", { className: title2, children: repoName }),
+    /* @__PURE__ */ jsx6("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
+  ] })
+] }));
+GitHubPreview.displayName = "GitHubPreview";
+var DefaultPreview = memo2(({ url }) => /* @__PURE__ */ jsx6("div", { className: preview, children: /* @__PURE__ */ jsx6("div", { className: content2, children: /* @__PURE__ */ jsx6("div", { className: title2, children: url }) }) }));
+DefaultPreview.displayName = "DefaultPreview";
 var LinkPreview = ({ url }) => {
   const [repoData, setRepoData] = useState2(null);
   const [figmaData, setFigmaData] = useState2(null);
@@ -410,6 +453,7 @@ var LinkPreview = ({ url }) => {
     "unknown"
   );
   useEffect2(() => {
+    const abortController = new AbortController();
     const loadLinkData = async () => {
       setLoading(true);
       const type = getLinkType(url);
@@ -417,19 +461,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__ */ jsx6(FigmaPreview, { data: figmaData });
+    }
+    if (linkType === "github") {
+      return /* @__PURE__ */ jsx6(
+        GitHubPreview,
+        {
+          repoData,
+          repoName,
+          updatedTimeText,
+          loading
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx6(DefaultPreview, { url });
+  };
   return /* @__PURE__ */ jsx6(
     "a",
     {
@@ -437,58 +507,31 @@ var LinkPreview = ({ url }) => {
       target: "_blank",
       rel: "noopener noreferrer",
       className: link3,
-      children: linkType === "figma" && figmaData ? (
-        // Figma 프리뷰 렌더링
-        /* @__PURE__ */ jsxs3("div", { className: preview, children: [
-          /* @__PURE__ */ jsx6("div", { className: iconContainer, children: /* @__PURE__ */ jsx6(
-            "img",
-            {
-              src: figmaData.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
-              alt: "Figma icon",
-              className: icon
-            }
-          ) }),
-          /* @__PURE__ */ jsxs3("div", { className: content2, children: [
-            /* @__PURE__ */ jsx6("div", { className: title2, children: figmaData.name }),
-            /* @__PURE__ */ jsx6("div", { className: description2, children: "www.figma.com" })
-          ] })
-        ] })
-      ) : linkType === "github" ? (
-        // GitHub 프리뷰 렌더링
-        /* @__PURE__ */ jsxs3("div", { className: `${preview} ${githubPreview}`, children: [
-          /* @__PURE__ */ jsx6("div", { className: iconContainer, children: /* @__PURE__ */ jsx6(
-            "img",
-            {
-              src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
-              alt: "Repository icon",
-              className: icon
-            }
-          ) }),
-          /* @__PURE__ */ jsxs3("div", { className: `${content2} ${githubContent}`, children: [
-            /* @__PURE__ */ jsx6("div", { className: title2, children: repoName }),
-            /* @__PURE__ */ jsx6("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
-          ] })
-        ] })
-      ) : (
-        // 기본 링크 프리뷰 렌더링
-        /* @__PURE__ */ jsx6("div", { className: preview, children: /* @__PURE__ */ jsx6("div", { className: content2, children: /* @__PURE__ */ jsx6("div", { className: title2, children: url }) }) })
-      )
+      children: renderPreview()
     }
   );
 };
 var LinkPreview_default = LinkPreview;
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var MemoizedRichText = 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 = memo3(RichTexts_default, (prev, next) => {
+  return areRichTextsEqual(prev.richTexts, next.richTexts);
 });
-var MemoizedImage = memo(Image_default, (prev, next) => {
-  return prev.src === next.src && prev.alt === next.alt && JSON.stringify(prev.caption) === JSON.stringify(next.caption);
+var MemoizedImage = memo3(Image_default, (prev, next) => {
+  return prev.src === next.src && prev.alt === next.alt && areRichTextsEqual(prev.caption, next.caption);
 });
-var MemoizedBookmark = memo(Bookmark_default, (prev, next) => {
+var MemoizedBookmark = memo3(Bookmark_default, (prev, next) => {
   return prev.url === next.url;
 });
-var MemoizedLinkPreview = memo(
+var MemoizedLinkPreview = memo3(
   LinkPreview_default,
   (prev, next) => {
     return prev.url === next.url;
@@ -497,7 +540,7 @@ var MemoizedLinkPreview = memo(
 
 // src/components/Renderer/components/List/ListItemGroup.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var RecursiveListItem = ({ block, renderBlock }) => {
+var RecursiveListItem = memo4(({ block, renderBlock }) => {
   let content3;
   if (block.type === "bulleted_list_item") {
     content3 = block.bulleted_list_item;
@@ -557,8 +600,9 @@ var RecursiveListItem = ({ block, renderBlock }) => {
     /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts }),
     renderedChildren.length > 0 && renderedChildren
   ] });
-};
-var ListGroup = ({ blocks, type, renderBlock }) => {
+});
+RecursiveListItem.displayName = "RecursiveListItem";
+var ListGroup = memo4(({ blocks, type, renderBlock }) => {
   if (blocks.length === 0) return null;
   return /* @__PURE__ */ jsx7(
     List,
@@ -577,10 +621,14 @@ var ListGroup = ({ blocks, type, renderBlock }) => {
       ))
     }
   );
-};
+});
+ListGroup.displayName = "ListGroup";
+
+// src/components/Renderer/components/Block/BlockRenderer.tsx
+import { memo as memo13 } from "react";
 
 // src/components/Renderer/components/Code/CodeBlock.tsx
-import { useMemo } from "react";
+import { useMemo, memo as memo5 } from "react";
 
 // src/components/Renderer/components/Code/styles.css.ts
 var codeBlock = "styles_codeBlock__1qn42yc0";
@@ -609,7 +657,7 @@ var renderToken = (token, i) => {
   }
   return /* @__PURE__ */ jsx8("span", { className: `token ${token.type}`, children: tokenContent }, i);
 };
-var CodeBlock = ({ code, language, caption: caption2 }) => {
+var CodeBlock = memo5(({ code, language, caption: caption2 }) => {
   const tokens = useMemo(() => {
     const prismLanguage = Prism.languages[language] || Prism.languages.plaintext;
     return Prism.tokenize(code, prismLanguage);
@@ -618,9 +666,13 @@ var CodeBlock = ({ code, language, caption: caption2 }) => {
     /* @__PURE__ */ jsx8("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ jsx8("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
     caption2 && caption2.length > 0 && /* @__PURE__ */ jsx8("figcaption", { children: /* @__PURE__ */ jsx8(MemoizedRichText, { richTexts: caption2 }) })
   ] });
-};
+});
+CodeBlock.displayName = "CodeBlock";
 var CodeBlock_default = CodeBlock;
 
+// src/components/Renderer/components/Typography/Typography.tsx
+import { memo as memo6 } from "react";
+
 // src/components/Renderer/components/Typography/styles.css.ts
 var heading1 = "styles_heading1__90a95g1";
 var heading2 = "styles_heading2__90a95g2";
@@ -629,34 +681,25 @@ var paragraph = "styles_paragraph__90a95g0";
 
 // src/components/Renderer/components/Typography/Typography.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Paragraph = ({
-  className,
-  children,
-  ...props
-}) => {
+var Paragraph = memo6(({ children, ...props }) => {
   return /* @__PURE__ */ jsx9("p", { className: paragraph, ...props, children });
-};
-var Heading1 = ({
-  className,
-  children,
-  ...props
-}) => {
+});
+Paragraph.displayName = "Paragraph";
+var Heading1 = memo6(({ children, ...props }) => {
   return /* @__PURE__ */ jsx9("h1", { className: heading1, ...props, children });
-};
-var Heading2 = ({
-  className,
-  children,
-  ...props
-}) => {
+});
+Heading1.displayName = "Heading1";
+var Heading2 = memo6(({ children, ...props }) => {
   return /* @__PURE__ */ jsx9("h2", { className: heading2, ...props, children });
-};
-var Heading3 = ({
-  className,
-  children,
-  ...props
-}) => {
+});
+Heading2.displayName = "Heading2";
+var Heading3 = memo6(({ children, ...props }) => {
   return /* @__PURE__ */ jsx9("h3", { className: heading3, ...props, children });
-};
+});
+Heading3.displayName = "Heading3";
+
+// src/components/Renderer/components/Column/Column.tsx
+import { memo as memo7 } from "react";
 
 // src/components/Renderer/components/Column/styles.css.ts
 var columnContainer = "styles_columnContainer__wle6we0";
@@ -664,30 +707,40 @@ var columnListContainer = "styles_columnListContainer__wle6we1";
 
 // src/components/Renderer/components/Column/Column.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Column = ({ block }) => {
+var Column = memo7(({ block }) => {
   if (!block || !block.children) return null;
   return /* @__PURE__ */ jsx10("div", { className: columnContainer, children: block.children.map((childBlock) => /* @__PURE__ */ jsx10(BlockRenderer_default, { block: childBlock, isColumn: true }, childBlock.id)) });
-};
+});
+Column.displayName = "Column";
 var Column_default = Column;
 
 // src/components/Renderer/components/Column/ColumnList.tsx
+import { memo as memo8 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var ColumnList = ({ block }) => {
+var ColumnList = memo8(({ block }) => {
   if (!block || !block.children) return null;
   return /* @__PURE__ */ jsx11("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ jsx11(Column_default, { block: column }, column.id)) });
-};
+});
+ColumnList.displayName = "ColumnList";
 var ColumnList_default = ColumnList;
 
+// src/components/Renderer/components/Quote/Quote.tsx
+import { memo as memo9 } from "react";
+
 // src/components/Renderer/components/Quote/styles.css.ts
 var container = "styles_container__mra9n0";
 
 // src/components/Renderer/components/Quote/Quote.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Quote = ({ richTexts, tabIndex }) => {
+var Quote = memo9(({ richTexts, tabIndex }) => {
   return /* @__PURE__ */ jsx12("blockquote", { className: container, tabIndex, children: /* @__PURE__ */ jsx12(MemoizedRichText, { richTexts }) });
-};
+});
+Quote.displayName = "Quote";
 var Quote_default = Quote;
 
+// src/components/Renderer/components/Table/Table.tsx
+import { memo as memo11 } from "react";
+
 // src/components/Renderer/components/Table/styles.css.ts
 var firstCell = "styles_firstCell__1rvbzfo4";
 var hasRowHeader = "styles_hasRowHeader__1rvbzfo6";
@@ -698,8 +751,9 @@ var tableCell = "styles_tableCell__1rvbzfo3";
 var tableContainer = "styles_tableContainer__1rvbzfo0";
 
 // src/components/Renderer/components/Table/TableRow.tsx
+import { memo as memo10 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var TableRow = ({
+var TableRow = memo10(({
   rowBlock,
   cellClassName = "",
   rowHeaderIndex = -1
@@ -725,12 +779,13 @@ var TableRow = ({
       `${rowBlock.id}-cell-${index}`
     );
   }) });
-};
+});
+TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Renderer/components/Table/Table.tsx
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var Table = ({ block }) => {
+var Table = memo11(({ block }) => {
   if (!block.table || !block.children) {
     return null;
   }
@@ -752,7 +807,8 @@ var Table = ({ block }) => {
       );
     }) })
   ] }) }) });
-};
+});
+Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Renderer/components/Table/index.ts
@@ -804,6 +860,9 @@ var Toggle = ({ block }) => {
 };
 var Toggle_default = Toggle;
 
+// src/components/Renderer/components/Video/Video.tsx
+import { memo as memo12 } from "react";
+
 // src/components/Renderer/components/Video/styles.css.ts
 var videoCaption = "styles_videoCaption__15b9vkb2";
 var videoContainer = "styles_videoContainer__15b9vkb0";
@@ -811,7 +870,7 @@ var videoPlayer = "styles_videoPlayer__15b9vkb1";
 
 // src/components/Renderer/components/Video/Video.tsx
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-var Video = ({ block }) => {
+var Video = memo12(({ block }) => {
   if (block.type !== "video" || !block.video) {
     return null;
   }
@@ -840,19 +899,19 @@ var Video = ({ block }) => {
     ] }),
     caption2 && caption2.length > 0 && /* @__PURE__ */ jsx16("figcaption", { className: videoCaption, children: caption2.map((c, i) => /* @__PURE__ */ jsx16("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;
 };
@@ -860,7 +919,7 @@ var Video_default = Video;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var BlockRenderer = ({ block, isColumn = false }) => {
+var BlockRenderer = memo13(({ block, isColumn = false }) => {
   if (!block) return null;
   switch (block.type) {
     case "link_preview":
@@ -916,7 +975,8 @@ var BlockRenderer = ({ block, isColumn = false }) => {
     default:
       return null;
   }
-};
+});
+BlockRenderer.displayName = "BlockRenderer";
 var BlockRenderer_default = BlockRenderer;
 
 // src/components/Title/index.tsx
@@ -926,9 +986,6 @@ var Title = ({ title: title3 }) => {
 };
 var Title_default = Title;
 
-// src/components/Cover/index.tsx
-import { useState as useState4, useRef as useRef2, useEffect as useEffect3 } from "react";
-
 // src/components/Cover/styles.css.ts
 import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
 var coverContainer = "styles_coverContainer__p0cp8d0";
@@ -938,17 +995,7 @@ var skeletonWrapper2 = _7a4684({ defaultClassName: "styles_skeletonWrapper__p0cp
 // src/components/Cover/index.tsx
 import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Cover = ({ src, alt }) => {
-  const [isLoaded, setIsLoaded] = useState4(false);
-  const imgRef = useRef2(null);
-  useEffect3(() => {
-    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__ */ jsxs9("div", { className: coverContainer, children: [
     /* @__PURE__ */ jsx19("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx19(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
     /* @__PURE__ */ jsx19(
@@ -975,8 +1022,12 @@ var lightTheme = "theme_lightTheme__sq3jkb1m";
 
 // src/components/Renderer/index.tsx
 import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
+var Renderer = memo14(({ blocks, isDarkMode = false, title: title3, cover }) => {
   const theme = isDarkMode ? darkTheme : lightTheme;
+  const renderBlock = useCallback2(
+    (childBlock) => /* @__PURE__ */ jsx20(BlockRenderer_default, { block: childBlock }),
+    []
+  );
   const renderedBlocks = useMemo2(() => {
     const result = [];
     for (let i = 0; i < blocks.length; i++) {
@@ -999,7 +1050,7 @@ var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
               {
                 blocks: listItems,
                 type: listItemType,
-                renderBlock: (childBlock) => /* @__PURE__ */ jsx20(BlockRenderer_default, { block: childBlock })
+                renderBlock
               },
               block.id
             )
@@ -1016,7 +1067,7 @@ var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
       }
     }
     return result;
-  }, [blocks]);
+  }, [blocks, renderBlock]);
   return /* @__PURE__ */ jsxs10(Fragment4, { children: [
     cover && /* @__PURE__ */ jsx20(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
     /* @__PURE__ */ jsxs10(