55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { lazy, Suspense } from 'react'
|
|
|
|
export type Language = 'python' | 'json' | 'toml' | 'css' | 'text'
|
|
|
|
export interface CodeEditorProps {
|
|
value: string
|
|
|
|
onChange?: (value: string) => void
|
|
language?: Language
|
|
readOnly?: boolean
|
|
height?: string
|
|
minHeight?: string
|
|
maxHeight?: string
|
|
placeholder?: string
|
|
theme?: 'light' | 'dark'
|
|
className?: string
|
|
}
|
|
|
|
const CodeEditorImpl = lazy(() => import('./CodeEditorImpl'))
|
|
|
|
function CodeEditorFallback({
|
|
height,
|
|
minHeight,
|
|
maxHeight,
|
|
className = '',
|
|
}: Pick<CodeEditorProps, 'height' | 'minHeight' | 'maxHeight' | 'className'>) {
|
|
return (
|
|
<div
|
|
className={`bg-muted animate-pulse rounded-md border ${className}`}
|
|
style={{ height, minHeight, maxHeight }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function CodeEditor(props: CodeEditorProps) {
|
|
const { height = '400px', minHeight, maxHeight, className = '' } = props
|
|
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<CodeEditorFallback
|
|
height={height}
|
|
minHeight={minHeight}
|
|
maxHeight={maxHeight}
|
|
className={className}
|
|
/>
|
|
}
|
|
>
|
|
<CodeEditorImpl {...props} />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
export default CodeEditor
|