Notes/packages/codemirror/src/index.ts

import { defaultKeymap, indentWithTab } from "@codemirror/commands";
import { EditorView, keymap, lineNumbers, ViewUpdate, type EditorViewConfig, type KeyBinding } from "@codemirror/view";
import { defaultHighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
import { Compartment } from "@codemirror/state";
import byMimeType from "./syntax_highlighting.js";

type ContentChangedListener = () => void;

export interface EditorConfig extends EditorViewConfig {
    onContentChanged?: ContentChangedListener;
}

export default class CodeMirror extends EditorView {

    private config: EditorConfig;
    private languageCompartment: Compartment;

    constructor(config: EditorConfig) {
        const languageCompartment = new Compartment();
        let extensions = [
            keymap.of([
                ...defaultKeymap,
                indentWithTab
            ]),
            languageCompartment.of([]),
            syntaxHighlighting(defaultHighlightStyle),
            lineNumbers()
        ];

        if (Array.isArray(config.extensions)) {
            extensions = [...extensions, ...config.extensions];
        }

        if (config.onContentChanged) {
            extensions.push(EditorView.updateListener.of((v) => this.#onDocumentUpdated(v)));
        }

        super({
            ...config,
            extensions
        });
        this.config = config;
        this.languageCompartment = languageCompartment;
    }

    #onDocumentUpdated(v: ViewUpdate) {
        if (v.docChanged) {
            this.config.onContentChanged?.();
        }
    }

    getText() {
        return this.state.doc.toString();
    }

    setText(content: string) {
        this.dispatch({
            changes: {
                from: 0,
                to: this.state.doc.length,
                insert: content || "",
            }
        })
    }

    async setMimeType(mime: string) {
        const newExtension = [];

        const correspondingSyntax = byMimeType[mime];
        if (correspondingSyntax) {
            const extension = StreamLanguage.define(await correspondingSyntax());
            newExtension.push(extension);
        }

        this.dispatch({
            effects: this.languageCompartment.reconfigure(newExtension)
        });
    }
}