react-markdown-code-highlighter
Version:
`react-markdown-code-highlighter` is a flexible [React](https://react.dev) component for rendering Markdown with syntax-highlighted code blocks using [highlight.js](https://highlightjs.org/). It is designed for use in chat systems and AI assistants like C
59 lines • 2.47 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const constant_js_1 = require("../constant.js");
const index_js_1 = __importDefault(require("../MarkdownCMD/index.js"));
const MarkdownInner = ({ children: _children = '', answerType, theme, ...rest }) => {
const cmdRef = (0, react_1.useRef)(null);
const prefixRef = (0, react_1.useRef)('');
const content = (0, react_1.useMemo)(() => {
if (typeof _children === 'string') {
return _children;
}
if (constant_js_1.__DEV__) {
console.error('The child of Markdown component must be a string');
}
return '';
}, [_children]);
(0, react_1.useEffect)(() => {
if (prefixRef.current !== content) {
let newContent = '';
if (prefixRef.current === '') {
newContent = content;
}
else {
if (content.startsWith(prefixRef.current)) {
newContent = content.slice(prefixRef.current.length);
}
else {
newContent = content;
cmdRef.current.clear();
}
}
cmdRef.current.push(newContent, answerType);
prefixRef.current = content;
}
}, [answerType, content]);
return (0, jsx_runtime_1.jsx)(index_js_1.default, { ref: cmdRef, theme: theme, ...rest });
};
const Markdown = (props) => {
const { children = '', answerType = 'answer', theme = 'light' } = props;
if (constant_js_1.__DEV__) {
if (!['thinking', 'answer'].includes(answerType)) {
throw new Error('The answerType of Markdown component must be either "thinking" or "answer"');
}
if (typeof children !== 'string') {
throw new Error('The child of Markdown component must be a string');
}
if (theme && !['dark', 'light'].includes(theme)) {
throw new Error('The theme of Markdown component must be either "dark" or "light"');
}
}
return (0, jsx_runtime_1.jsx)(MarkdownInner, { ...props, answerType: answerType, theme: theme });
};
exports.default = (0, react_1.memo)(Markdown);
//# sourceMappingURL=index.js.map