notion-to-jsx 1.2.10 → 1.2.12

package/dist/index.mjs

@@ -122,7 +122,8 @@ var Skeleton = ({
   variant = "rect",
   width,
   height,
-  className
+  className,
+  isLoading = true
 }) => {
   const getVariantClass = () => {
     switch (variant) {
@@ -135,6 +136,9 @@ var Skeleton = ({
         return rect;
     }
   };
+  if (!isLoading) {
+    return null;
+  }
   return /* @__PURE__ */ jsx3(
     "div",
     {
@@ -164,7 +168,7 @@ var Image = ({
   const [isLoaded, setIsLoaded] = useState(false);
   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" }) }),
+      /* @__PURE__ */ jsx4("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ jsx4(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
       /* @__PURE__ */ jsx4(
         "img",
         {
@@ -761,23 +765,77 @@ var Toggle = ({ block }) => {
 };
 var Toggle_default = Toggle;
 
+// src/components/Renderer/components/Video/styles.css.ts
+var videoCaption = "styles_videoCaption__15b9vkb2";
+var videoContainer = "styles_videoContainer__15b9vkb0";
+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 }) => {
+  if (block.type !== "video" || !block.video) {
+    return null;
+  }
+  const { type, external, caption: caption2 } = block.video;
+  let videoUrl = "";
+  if (type === "external") {
+    videoUrl = getVideoEmbedUrl(external?.url);
+  }
+  if (!videoUrl) {
+    return /* @__PURE__ */ jsx16("p", { children: "\uBE44\uB514\uC624\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: videoContainer, children: [
+    videoUrl.includes("youtube.com/embed/") ? /* @__PURE__ */ jsx16(
+      "iframe",
+      {
+        className: videoPlayer,
+        src: videoUrl,
+        title: "YouTube video player",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true
+      }
+    ) : /* @__PURE__ */ jsxs8("p", { children: [
+      "\uC678\uBD80 \uBE44\uB514\uC624 \uB9C1\uD06C:",
+      " ",
+      /* @__PURE__ */ jsx16("a", { href: videoUrl, target: "_blank", rel: "noopener noreferrer", children: videoUrl })
+    ] }),
+    caption2 && caption2.length > 0 && /* @__PURE__ */ jsx16("figcaption", { className: videoCaption, children: caption2.map((c, i) => /* @__PURE__ */ jsx16("span", { children: c.plain_text }, i)) })
+  ] });
+};
+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}`;
+    }
+  }
+  return url;
+};
+var Video_default = Video;
+
 // src/components/Renderer/components/Block/BlockRenderer.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var BlockRenderer = ({ block, isColumn = false }) => {
   if (!block) return null;
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ jsx16(MemoizedLinkPreview, { url: block.link_preview.url });
+      return /* @__PURE__ */ jsx17(MemoizedLinkPreview, { url: block.link_preview.url });
     case "paragraph":
-      return /* @__PURE__ */ jsx16(Paragraph, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ jsx17(Paragraph, { children: /* @__PURE__ */ jsx17(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ jsx16(Heading1, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ jsx17(Heading1, { children: /* @__PURE__ */ jsx17(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ jsx16(Heading2, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ jsx17(Heading2, { children: /* @__PURE__ */ jsx17(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ jsx16(Heading3, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ jsx17(Heading3, { children: /* @__PURE__ */ jsx17(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(
         CodeBlock_default,
         {
           code: block.code.rich_text[0]?.text?.content || "",
@@ -786,7 +844,7 @@ var BlockRenderer = ({ block, isColumn = false }) => {
         }
       ) });
     case "image":
-      return /* @__PURE__ */ jsx16("figure", { children: /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17("figure", { children: /* @__PURE__ */ jsx17(
         MemoizedImage,
         {
           src: block.image.file?.url || block.image.external?.url || "",
@@ -797,7 +855,7 @@ var BlockRenderer = ({ block, isColumn = false }) => {
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         MemoizedBookmark,
         {
           url: block.bookmark.url,
@@ -805,15 +863,17 @@ var BlockRenderer = ({ block, isColumn = false }) => {
         }
       );
     case "column_list":
-      return /* @__PURE__ */ jsx16(ColumnList_default, { block });
+      return /* @__PURE__ */ jsx17(ColumnList_default, { block });
     case "column":
       return null;
     case "quote":
-      return /* @__PURE__ */ jsx16(Quote_default, { richTexts: block.quote.rich_text });
+      return /* @__PURE__ */ jsx17(Quote_default, { richTexts: block.quote.rich_text });
     case "table":
-      return /* @__PURE__ */ jsx16(Table_default2, { block });
+      return /* @__PURE__ */ jsx17(Table_default2, { block });
     case "toggle":
-      return /* @__PURE__ */ jsx16(Toggle_default, { block });
+      return /* @__PURE__ */ jsx17(Toggle_default, { block });
+    case "video":
+      return /* @__PURE__ */ jsx17(Video_default, { block });
     default:
       return null;
   }
@@ -821,9 +881,9 @@ var BlockRenderer = ({ block, isColumn = false }) => {
 var BlockRenderer_default = BlockRenderer;
 
 // src/components/Title/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Title = ({ title: title3 }) => {
-  return /* @__PURE__ */ jsx17(Heading1, { children: title3 });
+  return /* @__PURE__ */ jsx18(Heading1, { children: title3 });
 };
 var Title_default = Title;
 
@@ -837,12 +897,12 @@ var imageStyle2 = _7a4684({ defaultClassName: "styles_imageStyle__p0cp8d4", vari
 var skeletonWrapper2 = _7a4684({ defaultClassName: "styles_skeletonWrapper__p0cp8d1", variantClassNames: { isLoaded: { true: "styles_skeletonWrapper_isLoaded_true__p0cp8d2", false: "styles_skeletonWrapper_isLoaded_false__p0cp8d3" } }, defaultVariants: { isLoaded: false }, compoundVariants: [] });
 
 // src/components/Cover/index.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Cover = ({ src, alt }) => {
   const [isLoaded, setIsLoaded] = useState4(false);
-  return /* @__PURE__ */ jsxs8("div", { className: coverContainer, children: [
-    /* @__PURE__ */ jsx18("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx18(Skeleton_default, { variant: "image" }) }),
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs9("div", { className: coverContainer, children: [
+    /* @__PURE__ */ jsx19("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx19(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
+    /* @__PURE__ */ jsx19(
       "img",
       {
         src,
@@ -864,7 +924,7 @@ var darkTheme = "theme_darkTheme__sq3jkb1n";
 var lightTheme = "theme_lightTheme__sq3jkb1m";
 
 // src/components/Renderer/index.tsx
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
   const theme = isDarkMode ? darkTheme : lightTheme;
   const renderedBlocks = useMemo2(() => {
@@ -876,7 +936,7 @@ var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
         const listItemType = `${listType}_list_item`;
         if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
           result.push(
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               ListBlocksRenderer_default,
               {
                 blocks,
@@ -896,20 +956,20 @@ var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
       if (handleListItem("bulleted") || handleListItem("numbered")) {
         continue;
       } else {
-        result.push(/* @__PURE__ */ jsx19(BlockRenderer_default, { block }, block.id));
+        result.push(/* @__PURE__ */ jsx20(BlockRenderer_default, { block }, block.id));
       }
     }
     return result;
   }, [blocks]);
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    cover && /* @__PURE__ */ jsx19(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    cover && /* @__PURE__ */ jsx20(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
+    /* @__PURE__ */ jsxs10(
       "article",
       {
         className: `${theme} ${container2}`,
         "aria-label": title3 || "Notion page content",
         children: [
-          title3 && /* @__PURE__ */ jsx19(Title_default, { title: title3 }),
+          title3 && /* @__PURE__ */ jsx20(Title_default, { title: title3 }),
           renderedBlocks
         ]
       }