notion-to-jsx 1.1.0 → 1.2.0

package/dist/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Renderer/index.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/components/Renderer/styles.css.ts
 var container = "styles_container__epva5u0";
@@ -74,19 +74,29 @@ var richText = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName:
 
 // src/components/Renderer/components/RichText/RichTexts.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var renderLink = (href, content3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className: link, children: content3 });
 var RichTexts = ({ richTexts }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: richTexts.map((text, index) => {
-    const { bold, italic, strikethrough, underline, code, color } = text.annotations;
-    const content3 = text.text.link ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "a",
-      {
-        href: text.text.link,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: link,
-        children: text.text.content
+    const { bold, italic, strikethrough, underline, code } = text.annotations;
+    let content3;
+    switch (text.type) {
+      case "text": {
+        if (text.text) {
+          const { text: textData } = text;
+          content3 = textData.link ? renderLink(textData.link, textData.content) : textData.content;
+        } else {
+          content3 = text.plain_text;
+        }
+        break;
+      }
+      case "mention": {
+        content3 = text.href ? renderLink(text.href, text.plain_text) : text.plain_text;
+        break;
       }
-    ) : text.text.content;
+      default: {
+        content3 = text.plain_text;
+      }
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
       {
@@ -283,8 +293,8 @@ var fetchOpenGraphData = async (url) => {
     if (!response.ok) {
       throw new Error("Failed to fetch metadata");
     }
-    const { status, data: metaData } = data;
-    if (status !== "success") {
+    const { status, data: metaData, statusCode } = data;
+    if (status !== "success" || statusCode !== 200) {
       throw new Error("API returned error status");
     }
     const parsedUrl = new URL(url);
@@ -357,13 +367,15 @@ var Bookmark_default = Bookmark;
 var import_react3 = require("react");
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
-var card2 = "styles_card__o1p3m11";
 var content2 = "styles_content__o1p3m12";
+var description2 = "styles_description__o1p3m16";
+var githubContent = "styles_githubContent__o1p3m18";
+var githubPreview = "styles_githubPreview__o1p3m17";
 var icon = "styles_icon__o1p3m14";
 var iconContainer = "styles_iconContainer__o1p3m13";
 var link3 = "styles_link__o1p3m10";
+var preview = "styles_preview__o1p3m11";
 var title2 = "styles_title__o1p3m15";
-var updatedText = "styles_updatedText__o1p3m16";
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -381,6 +393,48 @@ var fetchGitHubRepoData = async (repoPath) => {
     return null;
   }
 };
+var extractFigmaData = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.hostname.includes("figma.com")) {
+      const pathSegments = parsedUrl.pathname.split("/");
+      const fileSegment = pathSegments.find(
+        (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) {
+          fileName = decodeURIComponent(encodedName).replace(/-/g, " ");
+        }
+      }
+      if (!fileName && parsedUrl.pathname.includes("-")) {
+        const nameMatch = parsedUrl.pathname.match(/\/([^/]+)(?:\?|$)/);
+        if (nameMatch && 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,
+        url,
+        thumbnailUrl: "https://static.figma.com/app/icon/1/favicon.svg"
+      };
+    }
+    return null;
+  } catch (error) {
+    console.error("Error parsing Figma URL:", error);
+    return null;
+  }
+};
 var extractRepoPathFromUrl = (url) => {
   try {
     const parsedUrl = new URL(url);
@@ -397,6 +451,19 @@ var extractRepoPathFromUrl = (url) => {
     return null;
   }
 };
+var getLinkType = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.hostname === "github.com") {
+      return "github";
+    } else if (parsedUrl.hostname.includes("figma.com")) {
+      return "figma";
+    }
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+};
 var formatUpdatedTime = (dateString) => {
   const date = new Date(dateString);
   const now = /* @__PURE__ */ new Date();
@@ -432,35 +499,77 @@ var formatUpdatedTime = (dateString) => {
 };
 var LinkPreview = ({ url }) => {
   const [repoData, setRepoData] = (0, import_react3.useState)(null);
+  const [figmaData, setFigmaData] = (0, import_react3.useState)(null);
   const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [linkType, setLinkType] = (0, import_react3.useState)(
+    "unknown"
+  );
   (0, import_react3.useEffect)(() => {
-    const loadRepoData = async () => {
+    const loadLinkData = async () => {
       setLoading(true);
-      const repoPath = extractRepoPathFromUrl(url);
-      if (repoPath) {
-        const data = await fetchGitHubRepoData(repoPath);
-        setRepoData(data);
+      const type = getLinkType(url);
+      setLinkType(type);
+      if (type === "github") {
+        const repoPath = extractRepoPathFromUrl(url);
+        if (repoPath) {
+          const data = await fetchGitHubRepoData(repoPath);
+          setRepoData(data);
+        }
+      } else if (type === "figma") {
+        const data = extractFigmaData(url);
+        setFigmaData(data);
       }
       setLoading(false);
     };
-    loadRepoData();
+    loadLinkData();
   }, [url]);
   const repoName = repoData?.name || extractRepoPathFromUrl(url)?.split("/")[1] || "Repository";
   const updatedTimeText = repoData?.updated_at ? formatUpdatedTime(repoData.updated_at) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link3, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: card2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "img",
-      {
-        src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
-        alt: "Repository icon",
-        className: icon
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: content2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: repoName }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: updatedText, children: loading ? "Loading..." : `NotionX \u2022 ${updatedTimeText}` })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: link3,
+      children: linkType === "figma" && figmaData ? (
+        // Figma 프리뷰 렌더링
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: preview, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "img",
+            {
+              src: figmaData.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
+              alt: "Figma icon",
+              className: icon
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: content2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: figmaData.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: description2, children: "www.figma.com" })
+          ] })
+        ] })
+      ) : linkType === "github" ? (
+        // GitHub 프리뷰 렌더링
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${preview} ${githubPreview}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "img",
+            {
+              src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
+              alt: "Repository icon",
+              className: icon
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${content2} ${githubContent}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: repoName }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
+          ] })
+        ] })
+      ) : (
+        // 기본 링크 프리뷰 렌더링
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: preview, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: content2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: url }) }) })
+      )
+    }
+  );
 };
 var LinkPreview_default = LinkPreview;
 
@@ -491,8 +600,7 @@ var MemoizedLinkPreview = import_react4.default.memo(
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var RecursiveListItem = ({ block, index }) => {
   const blockProps = {
-    tabIndex: 0,
-    "data-block-id": block.id
+    tabIndex: 0
   };
   const blockType = block.type;
   const richTexts = block[blockType]?.rich_text;
@@ -564,11 +672,6 @@ var codeBlock = "styles_codeBlock__1qn42yc0";
 
 // src/components/Renderer/components/Code/CodeBlock.tsx
 var import_prismjs = __toESM(require("prismjs"));
-var import_prism = require("prismjs/themes/prism.css");
-var import_prism_typescript = require("prismjs/components/prism-typescript");
-var import_prism_javascript = require("prismjs/components/prism-javascript");
-var import_prism_jsx = require("prismjs/components/prism-jsx");
-var import_prism_tsx = require("prismjs/components/prism-tsx");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 if (typeof window !== "undefined") {
   window.Prism = import_prismjs.default;
@@ -622,34 +725,195 @@ var Heading3 = ({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: heading3, ...props, children });
 };
 
-// src/components/Renderer/components/Block/BlockRenderer.tsx
+// src/components/Renderer/components/Column/styles.css.ts
+var columnContainer = "styles_columnContainer__wle6we0";
+var columnListContainer = "styles_columnListContainer__wle6we1";
+
+// src/components/Renderer/components/Column/Column.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var Column = ({ block, onFocus }) => {
+  if (!block || !block.children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    BlockRenderer_default,
+    {
+      block: childBlock,
+      onFocus,
+      index
+    },
+    childBlock.id
+  )) });
+};
+var Column_default = Column;
+
+// src/components/Renderer/components/Column/ColumnList.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ColumnList = ({ block, onFocus }) => {
+  if (!block || !block.children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Column_default, { block: column, onFocus }, column.id)) });
+};
+var ColumnList_default = ColumnList;
+
+// src/components/Renderer/components/Quote/styles.css.ts
+var container2 = "styles_container__mra9n0";
+
+// src/components/Renderer/components/Quote/Quote.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Quote = ({ richTexts, tabIndex }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MemoizedRichText, { richTexts }) });
+};
+var Quote_default = Quote;
+
+// src/components/Renderer/components/Table/styles.css.ts
+var firstCell = "styles_firstCell__1rvbzfo4";
+var hasRowHeader = "styles_hasRowHeader__1rvbzfo6";
+var headerCell = "styles_headerCell__1rvbzfo2";
+var lastCell = "styles_lastCell__1rvbzfo5";
+var table = "styles_table__1rvbzfo1";
+var tableCell = "styles_tableCell__1rvbzfo3";
+var tableContainer = "styles_tableContainer__1rvbzfo0";
+
+// src/components/Renderer/components/Table/TableRow.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var TableRow = ({
+  rowBlock,
+  cellClassName = "",
+  rowHeaderIndex = -1
+}) => {
+  if (!rowBlock.table_row?.cells) {
+    return null;
+  }
+  const { cells } = rowBlock.table_row;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: cells.map((cell, index) => {
+    const isFirstCell = index === 0;
+    const isLastCell = index === cells.length - 1;
+    const isRowHeader = index === rowHeaderIndex;
+    let cellClasses = [tableCell, cellClassName];
+    if (isFirstCell) cellClasses.push(firstCell);
+    if (isLastCell) cellClasses.push(lastCell);
+    if (isRowHeader) cellClasses.push(hasRowHeader);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "td",
+      {
+        className: cellClasses.filter(Boolean).join(" "),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MemoizedRichText, { richTexts: cell })
+      },
+      `${rowBlock.id}-cell-${index}`
+    );
+  }) });
+};
+var TableRow_default = TableRow;
+
+// src/components/Renderer/components/Table/Table.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Table = ({ block, tabIndex = 0 }) => {
+  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__ */ (0, import_jsx_runtime13.jsx)("div", { className: tableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    has_column_header && rows[0] && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)(
+        TableRow_default,
+        {
+          rowBlock: row,
+          rowHeaderIndex: has_row_header ? 0 : -1
+        },
+        row.id
+      );
+    }) })
+  ] }) }) });
+};
+var Table_default = Table;
+
+// src/components/Renderer/components/Table/index.ts
+var Table_default2 = Table_default;
+
+// src/components/Renderer/components/Toggle/Toggle.tsx
+var import_react6 = require("react");
+
+// src/components/Renderer/components/Toggle/styles.css.ts
+var toggleContainer = "styles_toggleContainer__p7ue1z0";
+var toggleContent = "styles_toggleContent__p7ue1z4";
+var toggleHeader = "styles_toggleHeader__p7ue1z1";
+var toggleIcon = "styles_toggleIcon__p7ue1z2";
+var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
+
+// src/components/Renderer/components/Toggle/Toggle.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Toggle = ({ block, tabIndex = 0, onFocus }) => {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  if (!block.toggle || !block.children) {
+    return null;
+  }
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleToggle();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: toggleContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: toggleHeader,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        tabIndex,
+        onFocus,
+        role: "button",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${toggleIcon} ${isOpen ? toggleIconOpen : ""}`, children: "\u25B6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RichTexts_default, { richTexts: block.toggle.rich_text })
+        ]
+      }
+    ),
+    isOpen && block.children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      BlockRenderer_default,
+      {
+        block: childBlock,
+        index
+      },
+      childBlock.id
+    )) })
+  ] });
+};
+var Toggle_default = Toggle;
+
+// src/components/Renderer/components/Block/BlockRenderer.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BlockRenderer = ({ block, onFocus, index }) => {
   if (!block) return null;
   const blockProps = {
     tabIndex: 0,
-    onFocus,
-    "data-block-id": block.id
+    onFocus
   };
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        MemoizedLinkPreview,
-        {
-          url: block.link_preview.url,
-          ...blockProps
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
     case "paragraph":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Paragraph, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Paragraph, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading1, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading1, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading2, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading2, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading3, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading3, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         CodeBlock_default,
         {
           code: block.code.rich_text[0].text.content,
@@ -658,7 +922,7 @@ var BlockRenderer = ({ block, onFocus, index }) => {
         }
       ) });
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("figure", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("figure", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         MemoizedImage,
         {
           src: block.image.file?.url || block.image.external?.url,
@@ -668,8 +932,19 @@ var BlockRenderer = ({ block, onFocus, index }) => {
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MemoizedBookmark, { url: block.bookmark.url });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedBookmark, { url: block.bookmark.url });
+    case "column_list":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnList_default, { block, onFocus });
+    case "column":
+      return null;
+    case "quote":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
+    case "table":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Table_default2, { block, tabIndex: blockProps.tabIndex });
+    case "toggle":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Toggle_default, { block, tabIndex: blockProps.tabIndex, onFocus });
     default:
+      console.log(`\uC9C0\uC6D0\uB418\uC9C0 \uC54A\uB294 \uBE14\uB85D \uD0C0\uC785: ${block.type}`, block);
       return null;
   }
 };
@@ -680,9 +955,9 @@ var darkTheme = "theme_darkTheme__sq3jkb15";
 var lightTheme = "theme_lightTheme__sq3jkb14";
 
 // src/components/Title/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Title = ({ title: title3 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Heading1, { children: title3 });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading1, { children: title3 });
 };
 var Title_default = Title;
 
@@ -690,26 +965,26 @@ var Title_default = Title;
 var cover = "styles_cover__p0cp8d0";
 
 // src/components/Cover/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Cover = ({ src, alt }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src, alt, className: cover });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src, alt, className: cover });
 };
 var Cover_default = Cover;
 
 // src/components/Renderer/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Renderer = import_react6.default.memo(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Renderer = import_react7.default.memo(
   ({ blocks, isDarkMode = false, title: title3, cover: cover2, onBlockFocus }) => {
     const theme = isDarkMode ? darkTheme : lightTheme;
-    const [focusedIndex, setFocusedIndex] = (0, import_react6.useState)(-1);
-    const handleBlockFocus = (0, import_react6.useCallback)(
+    const [focusedIndex, setFocusedIndex] = (0, import_react7.useState)(-1);
+    const handleBlockFocus = (0, import_react7.useCallback)(
       (index) => {
         setFocusedIndex(index);
         onBlockFocus?.(index);
       },
       [onBlockFocus]
     );
-    const renderedBlocks = (0, import_react6.useMemo)(() => {
+    const renderedBlocks = (0, import_react7.useMemo)(() => {
       const result = [];
       for (let i = 0; i < blocks.length; i++) {
         const block = blocks[i];
@@ -718,7 +993,7 @@ var Renderer = import_react6.default.memo(
           const listItemType = `${listType}_list_item`;
           if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
             result.push(
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 ListBlocksRenderer_default,
                 {
                   blocks,
@@ -739,7 +1014,7 @@ var Renderer = import_react6.default.memo(
           continue;
         } else {
           result.push(
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               BlockRenderer_default,
               {
                 block,
@@ -753,15 +1028,15 @@ var Renderer = import_react6.default.memo(
       }
       return result;
     }, [blocks, handleBlockFocus]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      cover2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      cover2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "article",
         {
           className: `${theme} ${container}`,
           "aria-label": title3 || "Notion page content",
           children: [
-            title3 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Title_default, { title: title3 }),
+            title3 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title_default, { title: title3 }),
             renderedBlocks
           ]
         }