notion-block-renderer
Version:
Notion Block to React Components.
36 lines (35 loc) • 1.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("../utils");
const utils_2 = require("../utils");
const react_1 = require("react");
const react_syntax_highlighter_1 = require("react-syntax-highlighter");
/**
* Convert the code language notation of the Notion api to the code language notation of react-syntax-highlighter.
* https://developers.notion.com/reference/block#code-blocks
* https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/
*/
const formatCodeLang = (lang) => {
switch (lang) {
case "plain text":
return "plaintext";
case "objective-c":
return "objectivec";
default:
return lang;
}
};
const CodeRenderer = ({ lang, richTextArr }) => {
const { prefix, isCodeHighlighter, syntaxHighlighterCSS } = (0, react_1.useContext)(utils_2.Context);
if (isCodeHighlighter) {
return ((0, jsx_runtime_1.jsx)("div", { className: `language-${formatCodeLang(lang)} syntax-highlighter`, children: (0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.default, { language: formatCodeLang(lang), style: syntaxHighlighterCSS, className: "syntax-highlighter-pre", children: (0, utils_1.getJoinedRichText)(richTextArr) }) }));
}
else {
return ((0, jsx_runtime_1.jsx)("pre", { children: (0, jsx_runtime_1.jsx)("code", { className: `language-${lang}`, children: richTextArr.map((richText, index) => {
const className = (0, utils_1.annotationToClassName)(richText.annotations, prefix);
return ((0, jsx_runtime_1.jsx)("span", { className: className, children: richText.plain_text }, index));
}) }) }));
}
};
exports.default = CodeRenderer;