notion-block-renderer/dist/components/NotionBlockCore.js

Notion Block to React Components.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const CodeRenderer_1 = require("./CodeRenderer");
const ImageRenderer_1 = require("./ImageRenderer");
const TextRenderer_1 = require("./TextRenderer");
const react_1 = require("react");
const config_1 = require("../config");
const utils_1 = require("../utils");
const VideoRenderer_1 = require("./VideoRenderer");
const TableOfContentsRenderer_1 = require("./TableOfContentsRenderer");
const NotionBlockCore = ({ block, blocks }) => {
    const { prefix, blockPrefix } = (0, react_1.useContext)(utils_1.Context);
    switch (block.type) {
        case "paragraph":
            if (block[block.type].rich_text.length > 0) {
                return ((0, jsx_runtime_1.jsx)("div", { className: `${prefix}-${blockPrefix}-p`, children: (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }) }));
            }
            return ((0, jsx_runtime_1.jsx)("div", { className: `${prefix}-${blockPrefix}-p`, children: (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("br", {}) }) }));
        case "heading_1":
            return ((0, jsx_runtime_1.jsx)("div", { id: `${block.id}`, className: `${prefix}-${blockPrefix}-h1`, children: (0, jsx_runtime_1.jsx)("h1", { children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }) }));
        case "heading_2":
            return ((0, jsx_runtime_1.jsx)("div", { id: `${block.id}`, className: `${prefix}-${blockPrefix}-h2`, children: (0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }) }));
        case "heading_3":
            return ((0, jsx_runtime_1.jsx)("div", { id: `${block.id}`, className: `${prefix}-${blockPrefix}-h3`, children: (0, jsx_runtime_1.jsx)("h3", { children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }) }));
        case "table_of_contents":
            return ((0, jsx_runtime_1.jsx)("div", { id: `${block.id}`, className: `${prefix}-${blockPrefix}-table_of_contents`, children: blocks && (0, jsx_runtime_1.jsx)(TableOfContentsRenderer_1.default, { blocks: blocks }) }));
        case "bulleted_list_item":
            return ((0, jsx_runtime_1.jsx)("li", { className: `${prefix}-${blockPrefix}-bulleted_list_item`, children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }));
        case "numbered_list_item":
            return ((0, jsx_runtime_1.jsx)("li", { className: `${prefix}-${blockPrefix}-numbered_list_item`, children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }));
        case "quote":
            return ((0, jsx_runtime_1.jsx)("div", { className: `${prefix}-${blockPrefix}-quote`, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) }) }));
        case "callout":
            return ((0, jsx_runtime_1.jsxs)("div", { className: `${prefix}-${blockPrefix}-callout`, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefix}-icon`, children: block[block.type].icon.emoji }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix}-callout`, children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].rich_text }) })] }));
        case "code":
            return ((0, jsx_runtime_1.jsxs)("div", { className: `${prefix}-${blockPrefix}-code`, children: [(0, jsx_runtime_1.jsx)(CodeRenderer_1.default, { lang: block[block.type].language, richTextArr: block[block.type].rich_text }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix}-caption`, children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].caption }) })] }));
        case "image":
            return ((0, jsx_runtime_1.jsxs)("div", { className: `${prefix}-${blockPrefix}-image`, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefix}-image`, children: (0, jsx_runtime_1.jsx)(ImageRenderer_1.default, { block: block[block.type] }) }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix}-caption`, children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].caption }) })] }));
        case "video":
            return ((0, jsx_runtime_1.jsxs)("div", { className: `${prefix}-${blockPrefix}-video`, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefix}-video`, children: (0, jsx_runtime_1.jsx)(VideoRenderer_1.default, { block: block[block.type] }) }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix}-caption`, children: (0, jsx_runtime_1.jsx)(TextRenderer_1.default, { richTextArr: block[block.type].caption }) })] }));
        default:
            console.log(`This block type not yet configured in ${config_1.PACKAGE_NAME}`);
    }
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
};
exports.default = NotionBlockCore;