21 lines
735 B
TypeScript
21 lines
735 B
TypeScript
|
import { Suspense } from 'react';
|
||
|
|
import { Box, Button, Flex } from '@chakra-ui/react';
|
||
|
|
import { Editor as MonacoEditor } from '@monaco-editor/react';
|
||
|
|
|
||
|
|
export const Editor = (props) => {
|
||
|
|
const { defaultValue = '', defaultLanguage = 'javascript', width = '100%', height = '100%' } = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Box minH="60vh" w="100%" maxW={'container'} pos={'relative'}>
|
||
|
|
{/* only on client side render editor */}
|
||
|
|
<Flex position="absolute" w={width} h={height} top={0} left={0} right={0} bottom={0}>
|
||
|
|
<Suspense fallback={<div>Loading...</div>}>
|
||
|
|
<MonacoEditor defaultLanguage={defaultLanguage} defaultValue={defaultValue} />
|
||
|
|
</Suspense>
|
||
|
|
</Flex>
|
||
|
|
</Box>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|