@memori.ai/memori-react/esm/components/Snippet/Snippet.js

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import Button from '../ui/Button';
import Copy from '../icons/Copy';
import { prismSyntaxLangs } from '../../helpers/constants';
import { useTranslation } from 'react-i18next';
import cx from 'classnames';
const loadPrismScripts = () => {
    const existingScript = document.getElementById('memori-prism-script');
    if (existingScript) {
        return;
    }
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js';
    script.async = true;
    script.id = 'memori-prism-script';
    const autoloaderScript = document.createElement('script');
    autoloaderScript.src =
        'https://cdn.jsdelivr.net/npm/prismjs@v1.29.0/plugins/autoloader/prism-autoloader.min.js';
    autoloaderScript.async = true;
    autoloaderScript.id = 'memori-prism-autoloader-script';
    const prismCss = document.createElement('link');
    prismCss.rel = 'stylesheet';
    prismCss.href =
        'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css';
    document.head.appendChild(prismCss);
    document.head.appendChild(script);
    document.head.appendChild(autoloaderScript);
};
const Snippet = ({ medium, className, preview = false, showCopyButton = true, }) => {
    var _a, _b, _c, _d, _e;
    const { t } = useTranslation();
    useEffect(() => {
        loadPrismScripts();
    }, []);
    useEffect(() => {
        if ('Prism' in window && window.Prism.highlightAll)
            Prism.highlightAll();
    }, [medium.content]);
    return (_jsxs("div", { className: "memori-snippet", children: [_jsxs("div", { className: "memori-snippet--content", children: [_jsx("pre", { className: cx('line-numbers', className), "aria-labelledby": !!((_a = medium.title) === null || _a === void 0 ? void 0 : _a.length) ? `#snippet-${medium.mediumID}` : undefined, children: _jsx("code", { className: `language-${(_c = (_b = prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)) === null || _b === void 0 ? void 0 : _b.lang) !== null && _c !== void 0 ? _c : 'text'}`, children: ((_d = medium.content) === null || _d === void 0 ? void 0 : _d.length) && medium.content.length > 200 && preview
                                ? `${medium.content.slice(0, 200)}\n...`
                                : `${medium.content}` }) }), showCopyButton && (_jsx(Button, { padded: false, ghost: true, className: "memori-snippet--copy-button", title: t('copy') || 'Copy', icon: _jsx(Copy, {}), onClick: () => { var _a; return navigator.clipboard.writeText((_a = medium.content) !== null && _a !== void 0 ? _a : ''); } }))] }), !!((_e = medium.title) === null || _e === void 0 ? void 0 : _e.length) && (_jsx("p", { id: `snippet-${medium.mediumID}`, className: "memori-snippet--caption", children: medium.title }))] }));
};
export default Snippet;
//# sourceMappingURL=Snippet.js.map