Codemirror 6 with react

codemirror.tsx

import React, { useEffect, useMemo, useCallback, useLayoutEffect, useState } from "react";
import { EditorView } from "@codemirror/view";
import { EditorState, Compartment, EditorStateConfig, StateEffect, Extension } from "@codemirror/state";
import { indentUnit } from "@codemirror/language";

/** creates an editor view from an initial state - destroys the view on cleanup */
export function useEditorView(initState: (() => EditorStateConfig) | EditorStateConfig = {}): EditorView {
    const view = useMemo(
        () => new EditorView({ state: EditorState.create(typeof initState === "function" ? initState() : initState) }),
        []
    );
    useEffect(() => () => view.destroy(), []);
    return view;
}

/** adds an extension to a view and updates the extension anytime a dependency changes */
export function useExtension(view: EditorView, extensionCreator: () => Extension, deps: any[]) {
    const compartment = useMemo(() => new Compartment(), []);
    const extension = useMemo(extensionCreator, deps);

    useEffect(() => {
        if (!compartment.get(view.state)) {
            view.dispatch({ effects: StateEffect.appendConfig.of(compartment.of(extension)) });
        } else {
            view.dispatch({ effects: compartment.reconfigure(extension) });
        }
    }, [view, extension]);
}


// example useage
export function useUpdateIndent(view: EditorView, tabSize: number) {
    return useExtension(view, () => [EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))], [tabSize]);
}


/** returns the EditorView connected to a dom node */
export const CodeMirrorElement: React.FC<{ view: EditorView; autoFocus: boolean; className?: string }> = ({
    view,
    autoFocus,
    className,
}) => {
    const [domWrapper, setDomWrapper] = useState<HTMLDivElement | null>(null);
    const domWrapperNode = useCallback((node: HTMLDivElement | null) => {
        setDomWrapper(node);
    }, []);

    useLayoutEffect(() => {
        domWrapper?.appendChild(view.dom);
        autoFocus && view.focus();
        return () => {
            domWrapper?.firstElementChild && domWrapper?.removeChild(domWrapper.firstElementChild);
        };
    }, [domWrapper, view]);

    return <div ref={domWrapperNode} className={className}></div>;
};