@tomino/dynamic-form-semantic-ui/dist/mjs/properties/code.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-graphql';
import 'prismjs/components/prism-markup';
import 'prismjs/themes/prism-dark.css';
import { setValue } from '../helpers';
import { EditorContext } from '../editor/editor_context';
import { parseProps } from './properties_common';
export const CodeEditor = observer((props) => {
    const context = React.useContext(EditorContext);
    const onChange = React.useMemo(() => (code) => setValue(props, context, code), [
        context,
        props
    ]);
    const { formElement } = props;
    const { value } = parseProps(props, context, true);
    return (React.createElement(Editor, { value: value || '', onValueChange: onChange, highlight: code => highlight(code || '', languages[formElement.props.language]), padding: 10, style: {
            fontFamily: '"Fira code", "Fira Mono", monospace',
            fontSize: 12,
            flex: 1,
            marginTop: '3px',
            marginLeft: '3px'
        } }));
});
//# sourceMappingURL=code.js.map