Function Editor

website/src/repl/Editor.tsx:15–60

({ value, onChange }: Props)

};

export function Editor({ value, onChange }: Props): JSX.Element {
  const editor = useRef<HTMLDivElement>(null);
  const darkMode = useDarkMode();

  const onUpdate = EditorView.updateListener.of((v) => {
    if (onChange) {
      onChange(v.state.doc.toString());
    }
  });

  useEffect(() => {
    if (!editor.current) {
      return;
    }

    const readOnly = !onChange;

    const startState = EditorState.create({
      doc: value,
      // readOnly: !onChange,
      extensions: [
        readOnly ? minimalSetup : basicSetup,
        keymap.of([...defaultKeymap, indentWithTab]),
        javascript(),
        darkMode ? oneDark : undefined,
        readOnly ? undefined : onUpdate,
        EditorState.readOnly.of(readOnly),
        readOnly ? gutter({}) : undefined,
      ].filter(
        (value: Extension | undefined): value is Extension =>
          typeof value !== 'undefined'
      ),
    });

    const view = new EditorView({
      state: startState,
      parent: editor.current,
    });

    return () => {
      view.destroy();
    };
  }, [darkMode]);

  return <div ref={editor}></div>;
}