Function MonacoCodeEditor

frontend/app/monaco/monaco-react.tsx:25–117

({ text, readonly, language, onChange, onMount, path, options }: CodeEditorProps)

};

export function MonacoCodeEditor({ text, readonly, language, onChange, onMount, path, options }: CodeEditorProps) {
    const divRef = useRef<HTMLDivElement>(null);
    const editorRef = useRef<MonacoTypes.editor.IStandaloneCodeEditor | null>(null);
    const onUnmountRef = useRef<(() => void) | null>(null);
    const applyingFromProps = useRef(false);

    useEffect(() => {
        loadMonaco();

        const el = divRef.current;
        if (!el) return;

        const model = createModel(text, path, language);
        console.log("[monaco] CREATE MODEL", path, model);

        const editor = monaco.editor.create(el, {
            ...options,
            readOnly: readonly,
            model,
        });
        editorRef.current = editor;

        const sub = model.onDidChangeContent(() => {
            if (applyingFromProps.current) return;
            onChange?.(model.getValue());
        });

        if (onMount) {
            onUnmountRef.current = onMount(editor, monaco);
        }

        return () => {
            sub.dispose();
            if (onUnmountRef.current) onUnmountRef.current();
            editor.setModel(null);
            editor.dispose();
            model.dispose();
            console.log("[monaco] dispose model");
            editorRef.current = null;
        };
        // mount/unmount only
    }, []);

    useEffect(() => {
        const editor = editorRef.current;
        const el = divRef.current;
        if (!editor || !el) return;

        const debouncedLayout = debounce(100, () => {
            editor.layout();
        });
        const resizeObserver = new ResizeObserver(debouncedLayout);
        resizeObserver.observe(el);

        return () => {
            resizeObserver.disconnect();
            debouncedLayout.cancel();
        };