notion-to-jsx 1.2.11 → 1.2.13

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;
@@ -122,7 +127,8 @@ var Skeleton = ({
   variant = "rect",
   width,
   height,
-  className
+  className,
+  isLoading = true
 }) => {
   const getVariantClass = () => {
     switch (variant) {
@@ -135,6 +141,9 @@ var Skeleton = ({
         return rect;
     }
   };
+  if (!isLoading) {
+    return null;
+  }
   return /* @__PURE__ */ jsx3(
     "div",
     {
@@ -164,7 +173,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",
         {
@@ -475,27 +484,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;
+var ListGroup = ({ blocks, type, renderBlock }) => {
+  if (blocks.length === 0) return null;
   return /* @__PURE__ */ jsx7(
     List,
     {
@@ -503,38 +556,17 @@ var RecursiveListGroup = ({ blocks, type }) => {
       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);
-  return /* @__PURE__ */ jsx7(
-    List,
-    {
-      as: type === "numbered_list_item" ? "ol" : "ul",
-      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";
@@ -573,7 +605,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;
@@ -897,7 +929,7 @@ import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Cover = ({ src, alt }) => {
   const [isLoaded, setIsLoaded] = useState4(false);
   return /* @__PURE__ */ jsxs9("div", { className: coverContainer, children: [
-    /* @__PURE__ */ jsx19("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx19(Skeleton_default, { variant: "image" }) }),
+    /* @__PURE__ */ jsx19("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx19(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
     /* @__PURE__ */ jsx19(
       "img",
       {
@@ -931,20 +963,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;