1
/*
2
A lightweight react code editor component that can be
3
used in Next.js.
4

5
You have to have this line in nextjs's _app.tsx:
6

7
import "@uiw/react-textarea-code-editor/dist.css";
8

9
And it also has to be somewhere in the frontend code, so
10
this will work there.
11

12
TODO: To make this editable I just used a quick Input component from antd,
13
which sucks compared to what codemirror provides.  But it's only temporary.
14
Codemirror is harder due to compat with nextjs and we'll do that later.
15
*/
16

17
import { ElementType, useEffect, useState } from "react";
18

19
export default function CodeEditor(props) {
20
  const [Editor, setEditor] = useState<ElementType | null>(null);
21

22
  // We lazy load the Editor because we want to support using this in nextjs.
23
  useEffect(() => {
24
    (async () => {
25
      setEditor((await import("@uiw/react-textarea-code-editor")).default);
26
    })();
27
  }, []);
28

29
  if (Editor == null) {
30
    return <div>Loading...</div>;
31
  }
32

33
  return <Editor {...props} />;
34
}
35

36