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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
const Copy_1 = tslib_1.__importDefault(require("../icons/Copy"));
const constants_1 = require("../../helpers/constants");
const react_i18next_1 = require("react-i18next");
const classnames_1 = tslib_1.__importDefault(require("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 } = (0, react_i18next_1.useTranslation)();
    (0, react_1.useEffect)(() => {
        loadPrismScripts();
    }, []);
    (0, react_1.useEffect)(() => {
        if ('Prism' in window && window.Prism.highlightAll)
            Prism.highlightAll();
    }, [medium.content]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "memori-snippet", children: [(0, jsx_runtime_1.jsxs)("div", { className: "memori-snippet--content", children: [(0, jsx_runtime_1.jsx)("pre", { className: (0, classnames_1.default)('line-numbers', className), "aria-labelledby": !!((_a = medium.title) === null || _a === void 0 ? void 0 : _a.length) ? `#snippet-${medium.mediumID}` : undefined, children: (0, jsx_runtime_1.jsx)("code", { className: `language-${(_c = (_b = constants_1.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 && ((0, jsx_runtime_1.jsx)(Button_1.default, { padded: false, ghost: true, className: "memori-snippet--copy-button", title: t('copy') || 'Copy', icon: (0, jsx_runtime_1.jsx)(Copy_1.default, {}), 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) && ((0, jsx_runtime_1.jsx)("p", { id: `snippet-${medium.mediumID}`, className: "memori-snippet--caption", children: medium.title }))] }));
};
exports.default = Snippet;
//# sourceMappingURL=Snippet.js.map