73 lines
1.5 KiB
TypeScript
73 lines
1.5 KiB
TypeScript
import { lazy, Suspense } from 'react'
|
|
|
|
import type { DiffEditorProps, EditorProps } from '@monaco-editor/react'
|
|
|
|
const MonacoEditor = lazy(async () => {
|
|
const mod = await import('@monaco-editor/react')
|
|
return { default: mod.default }
|
|
})
|
|
|
|
const MonacoDiffEditor = lazy(async () => {
|
|
const mod = await import('@monaco-editor/react')
|
|
return { default: mod.DiffEditor }
|
|
})
|
|
|
|
function MonacoLoading({
|
|
height,
|
|
width,
|
|
className,
|
|
loading,
|
|
}: {
|
|
height?: string | number
|
|
width?: string | number
|
|
className?: string
|
|
loading?: React.ReactNode
|
|
}) {
|
|
return (
|
|
<div
|
|
className={className}
|
|
style={{ height: height ?? '100%', width: width ?? '100%' }}
|
|
>
|
|
{loading ?? (
|
|
<div className="flex h-full min-h-[280px] items-center justify-center bg-[#111111] text-sm text-slate-400">
|
|
正在加载编辑器...
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function LazyEditor(props: EditorProps) {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<MonacoLoading
|
|
height={props.height}
|
|
width={props.width}
|
|
className={props.className}
|
|
loading={props.loading}
|
|
/>
|
|
}
|
|
>
|
|
<MonacoEditor {...props} />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
export function LazyDiffEditor(props: DiffEditorProps) {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<MonacoLoading
|
|
height={props.height}
|
|
width={props.width}
|
|
className={props.className}
|
|
loading={props.loading}
|
|
/>
|
|
}
|
|
>
|
|
<MonacoDiffEditor {...props} />
|
|
</Suspense>
|
|
)
|
|
}
|