forked from Archives/Athou_commafeed
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { Loader } from "components/Loader"
|
|
import { useColorScheme } from "hooks/useColorScheme"
|
|
import { useAsync } from "react-async-hook"
|
|
|
|
const init = async () => {
|
|
window.MonacoEnvironment = {
|
|
async getWorker(_, label) {
|
|
let worker: typeof import("*?worker")
|
|
if (label === "css") {
|
|
worker = await import("monaco-editor/esm/vs/language/css/css.worker?worker")
|
|
} else if (label === "javascript") {
|
|
worker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker")
|
|
} else {
|
|
worker = await import("monaco-editor/esm/vs/editor/editor.worker?worker")
|
|
}
|
|
return new worker.default()
|
|
},
|
|
}
|
|
|
|
const monacoReact = await import("@monaco-editor/react")
|
|
const monaco = await import("monaco-editor")
|
|
monacoReact.loader.config({ monaco })
|
|
return monacoReact.Editor
|
|
}
|
|
|
|
interface RichCodeEditorProps {
|
|
height: number | string
|
|
language: "css" | "javascript"
|
|
value?: string
|
|
onChange: (value: string | undefined) => void
|
|
}
|
|
|
|
function RichCodeEditor(props: RichCodeEditorProps) {
|
|
const colorScheme = useColorScheme()
|
|
const editorTheme = colorScheme === "dark" ? "vs-dark" : "light"
|
|
|
|
const { result: Editor } = useAsync(init, [])
|
|
if (!Editor) return <Loader />
|
|
return (
|
|
<Editor
|
|
height={props.height}
|
|
defaultLanguage={props.language}
|
|
theme={editorTheme}
|
|
options={{ minimap: { enabled: false } }}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default RichCodeEditor
|