notion-to-jsx 1.2.12 → 1.2.14

package/dist/index.mjs

@@ -30,13 +30,18 @@ import { memo } from "react";
 
 // src/components/Renderer/components/RichText/styles.css.ts
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var emptyRichText = "styles_emptyRichText__fdf3twr";
 var link = "styles_link__fdf3twq";
 var richText = _7a4682({ defaultClassName: "styles__fdf3tw0", variantClassNames: { bold: { true: "styles_richText_bold_true__fdf3tw1" }, italic: { true: "styles_richText_italic_true__fdf3tw2" }, strikethrough: { true: "styles_richText_strikethrough_true__fdf3tw3" }, underline: { true: "styles_richText_underline_true__fdf3tw4" }, code: { true: "styles_richText_code_true__fdf3tw5" }, color: { "default": "styles_richText_color_default__fdf3tw6", gray: "styles_richText_color_gray__fdf3tw7", brown: "styles_richText_color_brown__fdf3tw8", orange: "styles_richText_color_orange__fdf3tw9", yellow: "styles_richText_color_yellow__fdf3twa", green: "styles_richText_color_green__fdf3twb", blue: "styles_richText_color_blue__fdf3twc", purple: "styles_richText_color_purple__fdf3twd", pink: "styles_richText_color_pink__fdf3twe", red: "styles_richText_color_red__fdf3twf", gray_background: "styles_richText_color_gray_background__fdf3twg", brown_background: "styles_richText_color_brown_background__fdf3twh", orange_background: "styles_richText_color_orange_background__fdf3twi", yellow_background: "styles_richText_color_yellow_background__fdf3twj", green_background: "styles_richText_color_green_background__fdf3twk", blue_background: "styles_richText_color_blue_background__fdf3twl", purple_background: "styles_richText_color_purple_background__fdf3twm", pink_background: "styles_richText_color_pink_background__fdf3twn", red_background: "styles_richText_color_red_background__fdf3two" } }, defaultVariants: {}, compoundVariants: [[{ strikethrough: true, underline: true }, "styles_richText_compound_0__fdf3twp"]] });
 
 // src/components/Renderer/components/RichText/RichTexts.tsx
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 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 }) => {
+  if (richTexts.length === 0) {
+    return /* @__PURE__ */ jsx2(EmptyRichText, {});
+  }
   return /* @__PURE__ */ jsx2(Fragment, { children: richTexts.map((text, index) => {
     const { bold, italic, strikethrough, underline, code, color } = text.annotations;
     let content3;
@@ -100,7 +105,7 @@ var RichTexts = ({ richTexts }) => {
 var RichTexts_default = RichTexts;
 
 // src/components/Renderer/components/Image/Image.tsx
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 
 // src/components/Renderer/components/Image/styles.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -166,12 +171,23 @@ var Image = ({
   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);
+  };
   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 }) }),
       /* @__PURE__ */ jsx4(
         "img",
         {
+          ref: imgRef,
           className: imageStyle({
             loaded: isLoaded,
             hasAspectRatio: !!format?.block_aspect_ratio
@@ -179,7 +195,7 @@ var Image = ({
           src,
           alt,
           loading: "lazy",
-          onLoad: () => setIsLoaded(true),
+          onLoad: handleLoad,
           width: format?.block_width,
           height: format?.block_height,
           style: getImageTagStyle(format)
@@ -253,7 +269,7 @@ var Bookmark = ({ url, metadata }) => {
 var Bookmark_default = Bookmark;
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-import { useState as useState2, useEffect } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
 var content2 = "styles_content__o1p3m12";
@@ -393,7 +409,7 @@ var LinkPreview = ({ url }) => {
   const [linkType, setLinkType] = useState2(
     "unknown"
   );
-  useEffect(() => {
+  useEffect2(() => {
     const loadLinkData = async () => {
       setLoading(true);
       const type = getLinkType(url);
@@ -479,54 +495,71 @@ var MemoizedLinkPreview = memo(
   }
 );
 
-// src/components/Renderer/components/List/ListBlocksRenderer.tsx
+// src/components/Renderer/components/List/ListItemGroup.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var RecursiveListItem = ({ block }) => {
-  const blockType = block.type;
+var RecursiveListItem = ({ block, renderBlock }) => {
   let content3;
-  if (blockType === "bulleted_list_item") {
+  if (block.type === "bulleted_list_item") {
     content3 = block.bulleted_list_item;
   } else {
     content3 = block.numbered_list_item;
   }
   const richTexts = content3.rich_text;
-  const filteredChildren = block.children?.filter(
-    (child) => child.type === blockType
-  );
+  const renderedChildren = [];
+  const children = block.children ?? [];
+  if (children.length > 0) {
+    let i = 0;
+    while (i < children.length) {
+      const currentChild = children[i];
+      if (!currentChild) {
+        i++;
+        continue;
+      }
+      if (currentChild.type === "bulleted_list_item" || currentChild.type === "numbered_list_item") {
+        const groupType = currentChild.type;
+        const currentGroup = [currentChild];
+        let j = i + 1;
+        while (j < children.length) {
+          const nextChildInGroup = children[j];
+          if (!nextChildInGroup) {
+            break;
+          }
+          if (nextChildInGroup.type === groupType) {
+            currentGroup.push(
+              nextChildInGroup
+            );
+            j++;
+          } else {
+            break;
+          }
+        }
+        renderedChildren.push(
+          /* @__PURE__ */ jsx7(
+            ListGroup,
+            {
+              blocks: currentGroup,
+              type: groupType,
+              renderBlock
+            },
+            `${currentChild.id}-group`
+          )
+        );
+        i = j;
+      } else {
+        renderedChildren.push(
+          /* @__PURE__ */ jsx7("div", { children: renderBlock(currentChild, block.id) }, currentChild.id)
+        );
+        i++;
+      }
+    }
+  }
   return /* @__PURE__ */ jsxs4(ListItem, { children: [
     /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts }),
-    filteredChildren && filteredChildren.length > 0 && /* @__PURE__ */ jsx7(RecursiveListGroup, { blocks: filteredChildren, type: blockType })
+    renderedChildren.length > 0 && renderedChildren
   ] });
 };
-var RecursiveListGroup = ({ blocks, type }) => {
-  if (!blocks || blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx7(
-    List,
-    {
-      as: type === "numbered_list_item" ? "ol" : "ul",
-      type,
-      role: "list",
-      "aria-label": type,
-      children: blocks.map((block) => /* @__PURE__ */ jsx7(RecursiveListItem, { block }, block.id))
-    }
-  );
-};
-var ListBlocksRenderer = ({
-  blocks,
-  startIndex,
-  type
-}) => {
-  let consecutiveItems = 0;
-  for (let i = startIndex; i < blocks.length; i++) {
-    const block = blocks[i];
-    if (!block) break;
-    if (block.type === type) {
-      consecutiveItems++;
-    } else {
-      break;
-    }
-  }
-  const listItems = blocks.slice(startIndex, startIndex + consecutiveItems);
+var ListGroup = ({ blocks, type, renderBlock }) => {
+  if (blocks.length === 0) return null;
   return /* @__PURE__ */ jsx7(
     List,
     {
@@ -534,11 +567,17 @@ var ListBlocksRenderer = ({
       type,
       role: "list",
       "aria-label": type,
-      children: listItems.map((block) => /* @__PURE__ */ jsx7(RecursiveListItem, { block }, block.id))
+      children: blocks.map((block) => /* @__PURE__ */ jsx7(
+        RecursiveListItem,
+        {
+          block,
+          renderBlock
+        },
+        block.id
+      ))
     }
   );
 };
-var ListBlocksRenderer_default = ListBlocksRenderer;
 
 // src/components/Renderer/components/Code/CodeBlock.tsx
 import { useMemo } from "react";
@@ -577,7 +616,7 @@ var CodeBlock = ({ code, language, caption: caption2 }) => {
   }, [code, language]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx8("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ jsx8("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
-    caption2 && /* @__PURE__ */ jsx8("figcaption", { children: /* @__PURE__ */ jsx8(MemoizedRichText, { richTexts: caption2 }) })
+    caption2 && caption2.length > 0 && /* @__PURE__ */ jsx8("figcaption", { children: /* @__PURE__ */ jsx8(MemoizedRichText, { richTexts: caption2 }) })
   ] });
 };
 var CodeBlock_default = CodeBlock;
@@ -888,7 +927,7 @@ var Title = ({ title: title3 }) => {
 var Title_default = Title;
 
 // src/components/Cover/index.tsx
-import { useState as useState4 } from "react";
+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";
@@ -900,15 +939,26 @@ var skeletonWrapper2 = _7a4684({ defaultClassName: "styles_skeletonWrapper__p0cp
 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);
+  };
   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",
       {
+        ref: imgRef,
         src,
         alt,
         className: imageStyle2({ isLoaded }),
-        onLoad: () => setIsLoaded(true),
+        onLoad: handleLoad,
         loading: "lazy"
       }
     )
@@ -935,20 +985,26 @@ var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
       const handleListItem = (listType) => {
         const listItemType = `${listType}_list_item`;
         if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
+          const listItems = [];
+          let j = i;
+          while (j < blocks.length && blocks[j] && blocks[j]?.type === listItemType) {
+            listItems.push(
+              blocks[j]
+            );
+            j++;
+          }
           result.push(
             /* @__PURE__ */ jsx20(
-              ListBlocksRenderer_default,
+              ListGroup,
               {
-                blocks,
-                startIndex: i,
-                type: listItemType
+                blocks: listItems,
+                type: listItemType,
+                renderBlock: (childBlock) => /* @__PURE__ */ jsx20(BlockRenderer_default, { block: childBlock })
               },
               block.id
             )
           );
-          while (i + 1 < blocks.length && blocks[i + 1] && blocks[i + 1]?.type === listItemType) {
-            i++;
-          }
+          i = j - 1;
           return true;
         }
         return false;