mirror of https://github.com/portainer/portainer
42 lines
816 B
TypeScript
42 lines
816 B
TypeScript
|
import CodeMirror from '@uiw/react-codemirror';
|
||
|
|
import { StreamLanguage } from '@codemirror/language';
|
||
|
|
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
|
||
|
|
import { useMemo } from 'react';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
id: string;
|
||
|
|
placeholder?: string;
|
||
|
|
yaml?: boolean;
|
||
|
|
readonly?: boolean;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
value: string;
|
||
|
|
height?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CodeEditor({
|
||
|
|
id,
|
||
|
|
onChange,
|
||
|
|
placeholder,
|
||
|
|
readonly,
|
||
|
|
value,
|
||
|
|
height = '500px',
|
||
|
|
yaml: isYaml,
|
||
|
|
}: Props) {
|
||
|
|
const extensions = useMemo(
|
||
|
|
() => (isYaml ? [StreamLanguage.define(yaml)] : []),
|
||
|
|
[isYaml]
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<CodeMirror
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
readOnly={readonly}
|
||
|
|
placeholder={placeholder}
|
||
|
|
id={id}
|
||
|
|
extensions={extensions}
|
||
|
|
height={height}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|