react-notion-super-renderer/dist/renderBlocks.js

Notion block renderer for React applications

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderBlocks = renderBlocks;
const jsx_runtime_1 = require("react/jsx-runtime");
function renderRichText(richText) {
    return richText.map((item, i) => {
        if (item.type === "text") {
            return (0, jsx_runtime_1.jsx)("span", { children: item.text.content }, i);
        }
        // Handle other types (mention, equation, etc.)
        return (0, jsx_runtime_1.jsx)("span", { children: item.plain_text }, i);
    });
}
function renderBlocks(blocks) {
    return blocks.map((block) => {
        switch (block.type) {
            case "paragraph":
                return ((0, jsx_runtime_1.jsx)("p", { children: renderRichText(block.paragraph.rich_text) }, block.id));
            case "heading_1":
                return ((0, jsx_runtime_1.jsx)("h1", { children: renderRichText(block.heading_1.rich_text) }, block.id));
            case "heading_2":
                return ((0, jsx_runtime_1.jsx)("h2", { children: renderRichText(block.heading_2.rich_text) }, block.id));
            case "heading_3":
                return ((0, jsx_runtime_1.jsx)("h3", { children: renderRichText(block.heading_3.rich_text) }, block.id));
            case "bulleted_list_item":
                return ((0, jsx_runtime_1.jsx)("li", { children: renderRichText(block.bulleted_list_item.rich_text) }, block.id));
            case "numbered_list_item":
                return ((0, jsx_runtime_1.jsx)("li", { children: renderRichText(block.numbered_list_item.rich_text) }, block.id));
            case "quote":
                return ((0, jsx_runtime_1.jsx)("blockquote", { children: renderRichText(block.quote.rich_text) }, block.id));
            case "to_do":
                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: block.to_do.checked, readOnly: true }), renderRichText(block.to_do.rich_text)] }, block.id));
            case "toggle":
                return ((0, jsx_runtime_1.jsx)("details", { children: (0, jsx_runtime_1.jsx)("summary", { children: renderRichText(block.toggle.rich_text) }) }, block.id));
            case "child_page":
                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Child page:" }), " ", block.child_page.title] }, block.id));
            case "child_database":
                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Child database:" }), " ", block.child_database.title] }, block.id));
            // Add more block types as needed
            default:
                return (0, jsx_runtime_1.jsxs)("div", { children: ["[Unhandled block type: ", block.type, "]"] }, block.id);
        }
    });
}