editor-react-parser
Version:
A renderer for editorjs block data for react
30 lines (29 loc) • 1.75 kB
JavaScript
import React from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import railcasts from "react-syntax-highlighter/dist/esm/styles/hljs/railscasts";
var defaultCodeConfig = {
classNames: {
container: "text-sm rounded-md overflow-hidden shadow-sm mt-2",
languageInfoBar: "flex px-1 py-1 items-center bg-gray-300/15",
languageInfoBarText: "pl-2 text-gray-500",
},
codeStyle: railcasts,
languages: [],
showLineNumbers: false,
};
var CodeBlock = function (_a) {
var _b, _c, _d, _e;
var item = _a.item, config = _a.config;
var currentConfig = Object.assign({}, defaultCodeConfig, config);
var language = (_b = currentConfig.languages) === null || _b === void 0 ? void 0 : _b.find(function (it) {
return it.shortName === item.data.mode ||
it.language === item.data.language ||
it.shortName === item.data.language;
});
return (React.createElement("figure", { key: item.id, className: (_c = currentConfig.classNames) === null || _c === void 0 ? void 0 : _c.container },
language && (React.createElement("div", { className: (_d = currentConfig.classNames) === null || _d === void 0 ? void 0 : _d.languageInfoBar },
React.createElement("img", { src: language.logoSrc, width: 25, height: 25, alt: language.logoAlt }),
React.createElement("figcaption", { className: (_e = currentConfig.classNames) === null || _e === void 0 ? void 0 : _e.languageInfoBarText }, language.displayText))),
React.createElement(SyntaxHighlighter, { language: language ? language.language : "", style: currentConfig.codeStyle, showLineNumbers: currentConfig.showLineNumbers }, item.data.code)));
};
export default CodeBlock;