@brizy/ui/es/Codemirror/index.js

React elements in Brizy style

import React, { useCallback, useMemo } from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import { BRZ_PREFIX } from "../constants";
// SSR
if (typeof navigator !== "undefined") {
    /* eslint-disable @typescript-eslint/no-require-imports */
    require("codemirror/mode/css/css.js");
    require("codemirror/mode/javascript/javascript.js");
    require("codemirror/addon/scroll/simplescrollbars.js");
    require("codemirror/mode/xml/xml.js");
    /* eslint-enable @typescript-eslint/no-require-imports */
}
export const Codemirror = (props) => {
    const { mode = "css", value, height = 300, onChange, onBlur, onFocus } = props;
    const options = useMemo(() => ({ mode, scrollbarStyle: "overlay" }), [mode]);
    const _onChange = useCallback((_, __, value) => {
        onChange(value);
    }, [onChange]);
    const selectedProps = {};
    if (typeof onFocus === "function") {
        selectedProps.onFocus = () => {
            onFocus();
        };
    }
    if (typeof onBlur === "function") {
        selectedProps.onBlur = () => {
            onBlur();
        };
    }
    return (React.createElement("div", { className: `${BRZ_PREFIX}-codemirror`, style: { height: height } },
        React.createElement(CodeMirror, Object.assign({ value: value, options: options, onBeforeChange: _onChange }, selectedProps))));
};