useCodeMirror

import React, { useCallback, useEffect, useState } from "react";
import { EditorState, EditorView, basicSetup } from"@codemirror/basic-setup";
import { Extension } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";

export default function useCodeMirror(extensions: Extension[]) {
  const [element, setElement] = useState<HTMLElement>();

  const ref = useCallback((node: HTMLElement | null) => {
    if (!node) return;

    setElement(node);
  }, []);

  useEffect(() => {
    if (!element) return;

    const view = new EditorView({
      state: EditorState.create({
        extensions: [
          basicSetup,
          javascript(),
          ...extensions
        ]
      }),
      parent: element
    });

    return () => view?.destroy();
  }, [element]);

  return { ref };
}