@nvq/flowtoken
Version:
Animated React components for streaming text and markdown with GitHub theme syntax highlighting (forked from flowtoken)
31 lines (30 loc) • 1.93 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
// React-syntax-highlighter custom renderer with CSS variables support for dual themes
const customCodeRenderer = ({ animation, animationDuration, animationTimingFunction }) => {
// Memoize the animation style to avoid recreating it for each text segment
const animationStyle = {
animationName: animation || '',
animationDuration,
animationTimingFunction,
animationIterationCount: 1,
whiteSpace: 'pre-wrap',
display: 'inline-block',
};
return ({ rows, stylesheet, useInlineStyles }) => rows.map((node, i) => {
var _a;
return (react_1.default.createElement("div", { key: i, style: ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.style) || {} }, node.children.map((token, key) => {
var _a;
// For CSS variables approach, ignore inline styles and use CSS classes
const tokenStyles = useInlineStyles ? {} : {}; // Empty styles to let CSS variables take control
// Add CSS class for token type if available
const tokenClassName = ((_a = token === null || token === void 0 ? void 0 : token.properties) === null || _a === void 0 ? void 0 : _a.className) ? token.properties.className.join(' ') : '';
return (react_1.default.createElement("span", { key: key, style: tokenStyles, className: tokenClassName }, token.children && token.children[0].value.split(' ').map((word, index) => (react_1.default.createElement("span", { key: index, style: animationStyle }, word + (index < token.children[0].value.split(' ').length - 1 ? ' ' : ''))))));
})));
});
};
exports.default = customCodeRenderer;