@datalayer/core/lib/components/snippets/SnippetDialog.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useCallback, useMemo, useState } from 'react';
import { nullTranslator } from '@jupyterlab/translation';
import { FormControl, Select, Text } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { Dialog } from '@primer/react/experimental';
import { Markdown } from '../display';
/**
 * Dialog to inject snippet in a cell.
 */
export function SnippetDialog(props) {
    const { model, onClose, language, snippets, markdownParser, sanitizer, translator, } = props;
    const [selection, setSelection] = useState(snippets[0]);
    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
    const onSelectionChange = useCallback((e) => {
        const selection = e.target.value;
        setSelection(snippets[parseInt(selection, 10)]);
    }, [setSelection, snippets]);
    const injectSnippet = useCallback(() => {
        const size = model.sharedModel.getSource().length;
        model.sharedModel.updateSource(size, size, '\n'.repeat(size ? 2 : 0) + selection.code);
        onClose();
    }, [model, selection, onClose]);
    return (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Pick a snippet to inject" }), onClose: onClose, footerButtons: [
            {
                buttonType: 'default',
                content: trans.__('Cancel'),
                onClick: onClose,
            },
            {
                buttonType: 'primary',
                content: trans.__('Inject snippet'),
                onClick: injectSnippet,
                autoFocus: true,
            },
        ], children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, {}), _jsx(Select, { block: true, onChange: onSelectionChange, children: snippets.map((snippet, index) => (_jsx(Select.Option, { value: `${index}`, children: snippet.title }, index))) }), _jsxs(FormControl.Caption, { children: [selection.description && (_jsx(Text, { as: "p", children: selection.description })), markdownParser ? (_jsx(Markdown, { markdownParser: markdownParser, sanitizer: sanitizer, text: `\`\`\`${language}\n${selection.code}\`\`\`` })) : (_jsx("code", { children: selection.code }))] })] }) }) }));
}
export default SnippetDialog;