notion-to-jsx 1.2.9 → 1.2.10

package/dist/index.mjs

@@ -1,12 +1,9 @@
 // src/components/Renderer/index.tsx
-import React6, { useState as useState5, useMemo as useMemo2, useCallback } from "react";
-
-// src/components/Renderer/styles.css.ts
-var container = "styles_container__epva5u0";
+import { useMemo as useMemo2, memo as memo2 } from "react";
 
 // src/components/Renderer/components/List/styles.css.ts
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var list = _7a468({ defaultClassName: "styles_list__es8vim0", variantClassNames: { type: { bulleted: "styles_list_type_bulleted__es8vim1", numbered: "styles_list_type_numbered__es8vim2" } }, defaultVariants: {}, compoundVariants: [] });
+var list = _7a468({ defaultClassName: "styles_list__es8vim0", variantClassNames: { type: { bulleted_list_item: "styles_list_type_bulleted_list_item__es8vim1", numbered_list_item: "styles_list_type_numbered_list_item__es8vim2" } }, defaultVariants: {}, compoundVariants: [] });
 var listItem = "styles_listItem__es8vim3";
 
 // src/components/Renderer/components/List/List.tsx
@@ -29,7 +26,7 @@ var ListItem = ({
 };
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-import React3 from "react";
+import { memo } from "react";
 
 // src/components/Renderer/components/RichText/styles.css.ts
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -462,22 +459,16 @@ var LinkPreview = ({ url }) => {
 var LinkPreview_default = LinkPreview;
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var MemoizedRichText = React3.memo(
-  RichTexts_default,
-  (prev, next) => {
-    return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
-  }
-);
-var MemoizedImage = React3.memo(Image_default, (prev, next) => {
+var MemoizedRichText = memo(RichTexts_default, (prev, next) => {
+  return JSON.stringify(prev.richTexts) === JSON.stringify(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 MemoizedBookmark = React3.memo(
-  Bookmark_default,
-  (prev, next) => {
-    return prev.url === next.url;
-  }
-);
-var MemoizedLinkPreview = React3.memo(
+var MemoizedBookmark = memo(Bookmark_default, (prev, next) => {
+  return prev.url === next.url;
+});
+var MemoizedLinkPreview = memo(
   LinkPreview_default,
   (prev, next) => {
     return prev.url === next.url;
@@ -486,46 +477,46 @@ var MemoizedLinkPreview = React3.memo(
 
 // src/components/Renderer/components/List/ListBlocksRenderer.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var RecursiveListItem = ({ block, index }) => {
-  const blockProps = {
-    tabIndex: 0
-  };
+var RecursiveListItem = ({ block }) => {
   const blockType = block.type;
-  const richTexts = block[blockType]?.rich_text;
-  return /* @__PURE__ */ jsxs4(ListItem, { ...blockProps, children: [
+  let content3;
+  if (blockType === "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
+  );
+  return /* @__PURE__ */ jsxs4(ListItem, { children: [
     /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts }),
-    block.children && block.children.length > 0 && /* @__PURE__ */ jsx7(
-      RecursiveListGroup,
-      {
-        blocks: block.children,
-        type: blockType.split("_")[0]
-      }
-    )
+    filteredChildren && filteredChildren.length > 0 && /* @__PURE__ */ jsx7(RecursiveListGroup, { blocks: filteredChildren, type: blockType })
   ] });
 };
 var RecursiveListGroup = ({ blocks, type }) => {
   if (!blocks || blocks.length === 0) return null;
-  const listItems = blocks.filter(
-    (block) => block.type === `${type}_list_item`
-  );
-  if (listItems.length === 0) return null;
   return /* @__PURE__ */ jsx7(
     List,
     {
-      as: type === "numbered" ? "ol" : "ul",
+      as: type === "numbered_list_item" ? "ol" : "ul",
       type,
       role: "list",
-      "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ jsx7(RecursiveListItem, { block, index }, block.id))
+      "aria-label": type,
+      children: blocks.map((block) => /* @__PURE__ */ jsx7(RecursiveListItem, { block }, block.id))
     }
   );
 };
-var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
+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}_list_item`) {
+    if (block.type === type) {
       consecutiveItems++;
     } else {
       break;
@@ -535,18 +526,11 @@ var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
   return /* @__PURE__ */ jsx7(
     List,
     {
-      as: type === "numbered" ? "ol" : "ul",
+      as: type === "numbered_list_item" ? "ol" : "ul",
       type,
       role: "list",
-      "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ jsx7(
-        RecursiveListItem,
-        {
-          block,
-          index: startIndex + index
-        },
-        block.id
-      ))
+      "aria-label": type,
+      children: listItems.map((block) => /* @__PURE__ */ jsx7(RecursiveListItem, { block }, block.id))
     }
   );
 };
@@ -637,36 +621,27 @@ var columnListContainer = "styles_columnListContainer__wle6we1";
 
 // src/components/Renderer/components/Column/Column.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Column = ({ block, onFocus }) => {
+var Column = ({ block }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ jsx10("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx10(
-    BlockRenderer_default,
-    {
-      block: childBlock,
-      onFocus,
-      index,
-      isColumn: true
-    },
-    childBlock.id
-  )) });
+  return /* @__PURE__ */ jsx10("div", { className: columnContainer, children: block.children.map((childBlock) => /* @__PURE__ */ jsx10(BlockRenderer_default, { block: childBlock, isColumn: true }, childBlock.id)) });
 };
 var Column_default = Column;
 
 // src/components/Renderer/components/Column/ColumnList.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
-var ColumnList = ({ block, onFocus }) => {
+var ColumnList = ({ block }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ jsx11("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ jsx11(Column_default, { block: column, onFocus }, column.id)) });
+  return /* @__PURE__ */ jsx11("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ jsx11(Column_default, { block: column }, column.id)) });
 };
 var ColumnList_default = ColumnList;
 
 // src/components/Renderer/components/Quote/styles.css.ts
-var container2 = "styles_container__mra9n0";
+var container = "styles_container__mra9n0";
 
 // src/components/Renderer/components/Quote/Quote.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var Quote = ({ richTexts, tabIndex }) => {
-  return /* @__PURE__ */ jsx12("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ jsx12(MemoizedRichText, { richTexts }) });
+  return /* @__PURE__ */ jsx12("blockquote", { className: container, tabIndex, children: /* @__PURE__ */ jsx12(MemoizedRichText, { richTexts }) });
 };
 var Quote_default = Quote;
 
@@ -712,23 +687,18 @@ 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, tabIndex = 0 }) => {
+var Table = ({ block }) => {
   if (!block.table || !block.children) {
     return null;
   }
   const { table_width, has_column_header, has_row_header } = block.table;
-  const rows = block.children?.filter(
-    (child) => child.type === "table_row"
-  ) || [];
-  return /* @__PURE__ */ jsx14("div", { className: tableContainer, children: /* @__PURE__ */ jsx14("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  const rows = block.children?.filter((child) => child.type === "table_row") || [];
+  return /* @__PURE__ */ jsx14("div", { className: tableContainer, children: /* @__PURE__ */ jsx14("table", { className: table, children: rows.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
     has_column_header && rows[0] && /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
-    /* @__PURE__ */ jsx14("tbody", { children: rows.filter(
-      (row) => row !== void 0 && row.type === "table_row"
-    ).map((row, rowIndex) => {
+    /* @__PURE__ */ jsx14("tbody", { children: rows.filter((row) => row !== void 0 && row.type === "table_row").map((row, rowIndex) => {
       if (has_column_header && rowIndex === 0) {
         return null;
       }
-      const actualRowIndex = has_column_header ? rowIndex - 1 : rowIndex;
       return /* @__PURE__ */ jsx14(
         TableRow_default,
         {
@@ -757,7 +727,7 @@ var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
 
 // src/components/Renderer/components/Toggle/Toggle.tsx
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
-var Toggle = ({ block, tabIndex = 0, onFocus }) => {
+var Toggle = ({ block }) => {
   const [isOpen, setIsOpen] = useState3(false);
   if (!block.toggle || !block.children) {
     return null;
@@ -778,8 +748,6 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
         className: toggleHeader,
         onClick: handleToggle,
         onKeyDown: handleKeyDown,
-        tabIndex,
-        onFocus,
         role: "button",
         "aria-expanded": isOpen,
         children: [
@@ -788,56 +756,40 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
         ]
       }
     ),
-    isOpen && block.children && /* @__PURE__ */ jsx15("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx15(
-      BlockRenderer_default,
-      {
-        block: childBlock,
-        index
-      },
-      childBlock.id
-    )) })
+    isOpen && block.children && /* @__PURE__ */ jsx15("div", { className: toggleContent, children: block.children.map((childBlock) => /* @__PURE__ */ jsx15(BlockRenderer_default, { block: childBlock }, childBlock.id)) })
   ] });
 };
 var Toggle_default = Toggle;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var BlockRenderer = ({
-  block,
-  onFocus,
-  index,
-  isColumn = false
-}) => {
+var BlockRenderer = ({ block, isColumn = false }) => {
   if (!block) return null;
-  const blockProps = {
-    tabIndex: 0,
-    onFocus
-  };
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ jsx16(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
+      return /* @__PURE__ */ jsx16(MemoizedLinkPreview, { url: block.link_preview.url });
     case "paragraph":
-      return /* @__PURE__ */ jsx16(Paragraph, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ jsx16(Paragraph, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ jsx16(Heading1, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ jsx16(Heading1, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ jsx16(Heading2, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ jsx16(Heading2, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ jsx16(Heading3, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ jsx16(Heading3, { children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ jsx16("div", { ...blockProps, children: /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
         CodeBlock_default,
         {
-          code: block.code.rich_text[0].text.content,
+          code: block.code.rich_text[0]?.text?.content || "",
           language: block.code.language,
-          caption: block.code.caption?.[0]?.plain_text
+          caption: block.code.caption
         }
       ) });
     case "image":
-      return /* @__PURE__ */ jsx16("figure", { ...blockProps, children: /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx16("figure", { children: /* @__PURE__ */ jsx16(
         MemoizedImage,
         {
-          src: block.image.file?.url || block.image.external?.url,
+          src: block.image.file?.url || block.image.external?.url || "",
           alt: block.image.caption?.[0]?.plain_text || "",
           caption: block.image.caption,
           format: block.image.format,
@@ -853,32 +805,21 @@ var BlockRenderer = ({
         }
       );
     case "column_list":
-      return /* @__PURE__ */ jsx16(ColumnList_default, { block, onFocus });
+      return /* @__PURE__ */ jsx16(ColumnList_default, { block });
     case "column":
       return null;
     case "quote":
-      return /* @__PURE__ */ jsx16(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
+      return /* @__PURE__ */ jsx16(Quote_default, { richTexts: block.quote.rich_text });
     case "table":
-      return /* @__PURE__ */ jsx16(Table_default2, { block, tabIndex: blockProps.tabIndex });
+      return /* @__PURE__ */ jsx16(Table_default2, { block });
     case "toggle":
-      return /* @__PURE__ */ jsx16(
-        Toggle_default,
-        {
-          block,
-          tabIndex: blockProps.tabIndex,
-          onFocus
-        }
-      );
+      return /* @__PURE__ */ jsx16(Toggle_default, { block });
     default:
       return null;
   }
 };
 var BlockRenderer_default = BlockRenderer;
 
-// src/styles/theme.css.ts
-var darkTheme = "theme_darkTheme__sq3jkb1n";
-var lightTheme = "theme_lightTheme__sq3jkb1m";
-
 // src/components/Title/index.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 var Title = ({ title: title3 }) => {
@@ -915,81 +856,69 @@ var Cover = ({ src, alt }) => {
 };
 var Cover_default = Cover;
 
+// src/components/Renderer/styles.css.ts
+var container2 = "styles_container__epva5u0";
+
+// src/styles/theme.css.ts
+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";
-var Renderer = React6.memo(
-  ({ blocks, isDarkMode = false, title: title3, cover, onBlockFocus }) => {
-    const theme = isDarkMode ? darkTheme : lightTheme;
-    const [focusedIndex, setFocusedIndex] = useState5(-1);
-    const handleBlockFocus = useCallback(
-      (index) => {
-        setFocusedIndex(index);
-        onBlockFocus?.(index);
-      },
-      [onBlockFocus]
-    );
-    const renderedBlocks = useMemo2(() => {
-      const result = [];
-      for (let i = 0; i < blocks.length; i++) {
-        const block = blocks[i];
-        if (!block) break;
-        const handleListItem = (listType) => {
-          const listItemType = `${listType}_list_item`;
-          if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
-            result.push(
-              /* @__PURE__ */ jsx19(
-                ListBlocksRenderer_default,
-                {
-                  blocks,
-                  startIndex: i,
-                  type: listType
-                },
-                block.id
-              )
-            );
-            while (i + 1 < blocks.length && blocks[i + 1] && blocks[i + 1]?.type === listItemType) {
-              i++;
-            }
-            return true;
-          }
-          return false;
-        };
-        if (handleListItem("bulleted") || handleListItem("numbered")) {
-          continue;
-        } else {
+var Renderer = memo2(({ blocks, isDarkMode = false, title: title3, cover }) => {
+  const theme = isDarkMode ? darkTheme : lightTheme;
+  const renderedBlocks = useMemo2(() => {
+    const result = [];
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      if (!block) break;
+      const handleListItem = (listType) => {
+        const listItemType = `${listType}_list_item`;
+        if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
           result.push(
             /* @__PURE__ */ jsx19(
-              BlockRenderer_default,
+              ListBlocksRenderer_default,
               {
-                block,
-                index: i,
-                onFocus: () => handleBlockFocus(i)
+                blocks,
+                startIndex: i,
+                type: listItemType
               },
               block.id
             )
           );
+          while (i + 1 < blocks.length && blocks[i + 1] && blocks[i + 1]?.type === listItemType) {
+            i++;
+          }
+          return true;
         }
+        return false;
+      };
+      if (handleListItem("bulleted") || handleListItem("numbered")) {
+        continue;
+      } else {
+        result.push(/* @__PURE__ */ jsx19(BlockRenderer_default, { block }, block.id));
       }
-      return result;
-    }, [blocks, handleBlockFocus]);
-    return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-      cover && /* @__PURE__ */ jsx19(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
-      /* @__PURE__ */ jsxs9(
-        "article",
-        {
-          className: `${theme} ${container}`,
-          "aria-label": title3 || "Notion page content",
-          children: [
-            title3 && /* @__PURE__ */ jsx19(Title_default, { title: title3 }),
-            renderedBlocks
-          ]
-        }
-      )
-    ] });
-  }
-);
+    }
+    return result;
+  }, [blocks]);
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    cover && /* @__PURE__ */ jsx19(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
+    /* @__PURE__ */ jsxs9(
+      "article",
+      {
+        className: `${theme} ${container2}`,
+        "aria-label": title3 || "Notion page content",
+        children: [
+          title3 && /* @__PURE__ */ jsx19(Title_default, { title: title3 }),
+          renderedBlocks
+        ]
+      }
+    )
+  ] });
+});
 Renderer.displayName = "Renderer";
+var Renderer_default = Renderer;
 export {
-  Renderer
+  Renderer_default as Renderer
 };
 //# sourceMappingURL=index.mjs.map