@nvq/flowtoken
Version:
Animated React components for streaming text and markdown with GitHub theme syntax highlighting (forked from flowtoken)
58 lines (57 loc) • 3.54 kB
JavaScript
;
"use client";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
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"));
const react_syntax_highlighter_1 = require("react-syntax-highlighter");
const icons_react_1 = require("@tabler/icons-react");
const CodeRenderer_1 = __importDefault(require("./CodeRenderer"));
const DefaultCode = (_a) => {
var { node, className, children, style, codeStyle, // Extract to prevent passing to DOM
animateText, animation, animationDuration, animationTimingFunction } = _a, props = __rest(_a, ["node", "className", "children", "style", "codeStyle", "animateText", "animation", "animationDuration", "animationTimingFunction"]);
const [copied, setCopied] = react_1.default.useState(false);
const handleCopy = () => {
const textToCopy = Array.isArray(children)
? children.join("")
: String(children);
navigator.clipboard.writeText(textToCopy);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
if (!className || !className.startsWith("language-")) {
return (react_1.default.createElement("code", Object.assign({}, props, { className: "ft-inline-code" }), animateText(children)));
}
const language = (className === null || className === void 0 ? void 0 : className.substring(9).trim()) || "text";
return (react_1.default.createElement("div", Object.assign({}, props, { className: "ft-code-container", style: style }),
react_1.default.createElement("div", { className: "ft-code-header" },
react_1.default.createElement("div", { style: { paddingLeft: "0.75rem" } },
react_1.default.createElement("span", { className: "ft-code-language" }, language)),
react_1.default.createElement("button", { className: "ft-copy-button", onClick: handleCopy, "aria-label": copied ? "Copied!" : "Copy code" }, copied ? (react_1.default.createElement(icons_react_1.IconCheck, { className: "ft-copy-icon ft-copy-icon-success", "aria-hidden": "true" })) : (react_1.default.createElement(icons_react_1.IconCopy, { className: "ft-copy-icon ft-copy-icon-default", "aria-hidden": "true" })))),
react_1.default.createElement("div", { className: "ft-code-content rsh-container" },
react_1.default.createElement(react_syntax_highlighter_1.Prism, { useInlineStyles: false, language: language, renderer: (0, CodeRenderer_1.default)({
animation,
animationDuration,
animationTimingFunction,
}), customStyle: {
margin: 0,
padding: "1rem",
background: "transparent",
fontSize: "0.775rem",
overflow: "auto",
borderRadius: "0 0 0.75rem 0.75rem",
} }, String(children)))));
};
exports.default = DefaultCode;