29 lines
859 B
TypeScript
29 lines
859 B
TypeScript
import { FC } from "@curi/react-universal/node_modules/@types/react";
|
|
import { FieldConfig, useField } from "formik";
|
|
import AceEditor from "react-ace";
|
|
import "ace-builds/src-noconflict/mode-yaml";
|
|
import "ace-builds/src-noconflict/theme-github";
|
|
import { styled } from "@mui/system";
|
|
|
|
const Editor: FC<FieldConfig<string> & { label?: string; className?: string }> =
|
|
({ label, className, ...props }) => {
|
|
const [field, , helper] = useField(props);
|
|
return (
|
|
<AceEditor
|
|
className={className}
|
|
style={{ width: "100%" }}
|
|
{...field}
|
|
onChange={(value) => helper.setValue(value)}
|
|
{...props}
|
|
mode="yaml"
|
|
theme="github"
|
|
editorProps={{ $blockScrolling: true }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const YamlEditor = Editor;
|
|
styled(Editor)(({ theme }) => ({
|
|
marginBottom: theme.spacing(2),
|
|
}));
|