Unexpected Behavior with State Changes in @typefox/monaco-editor-react 6.6.0

[pbrostean]

With the latest version of @typefox/monaco-editor-react (6.6.0) and the corresponding packages according to the compatibility table, there is an unexpected behavior in the component when state changes occur. Previously, the following usage was not an issue:

import { MonacoEditorReactComp } from "@typefox/monaco-editor-react"
import "index.css"
import { MonacoEditorLanguageClientWrapper, TextContents, WrapperConfig } from "monaco-editor-wrapper"
import { CSSProperties, useEffect, useMemo, useRef, useState } from "react"
import { createMonacoWrapperConfig } from "./config"

interface TestEditorProps {
    style?: CSSProperties
}

export const TestEditor = ({ style = { height: "50vH" }}: TestEditorProps) => {
    const [wrapperConfig, setWrapperConfig] = useState<WrapperConfig | null>(null)
    const [testState, setTestState] = useState<string>("")

    const monacoEditorRef = useRef<MonacoEditorLanguageClientWrapper | null>(null)
    //const memoizedWrapperConfig= useMemo(() => createMonacoWrapperConfig("Hello World!", "test.txt"), [])

    useEffect(() => {
        setWrapperConfig(createMonacoWrapperConfig("Hello World!", "test.txt"))
    }, [])

    const handleEditorLoad = (wrapper: MonacoEditorLanguageClientWrapper) => {
        monacoEditorRef.current = wrapper
    }

    const handleTextChanged = (textChanges: TextContents) => {
        if (!monacoEditorRef.current?.isStarted()) return
        setTestState(textChanges.modified as string)
    }

    return (
        <>
            {wrapperConfig && (
                <MonacoEditorReactComp
                    wrapperConfig={wrapperConfig}
                    style={style}
                    onLoad={handleEditorLoad}
                    onTextChanged={handleTextChanged}
                />
            )}
            {testState}
        </>
    )
}

However, since the update, all state changes lead to the following error:

Uncaught (in promise) Canceled: Canceled
    at Delayer.cancel (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:8208:69)
    at Delayer.dispose (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:8218:14)
    at dispose (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:2531:13)
    at _DisposableStore.clear (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:2724:11)
    at _DisposableStore.dispose (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:2714:14)
    at _a30.dispose (http://localhost:5173/node_modules/.vite/deps/chunk-2NK2GE54.js?v=d546c923:20423:23)
    at _a31.dispose (http://localhost:5173/node_modules/.vite/deps/chunk-2NK2GE54.js?v=d546c923:20494:33)
    at dispose (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:2531:13)
    at DisposableMap.clearAndDisposeAll (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:2906:11)
    at DisposableMap.dispose (http://localhost:5173/node_modules/.vite/deps/chunk-WFGYAUMR.js?v=d546c923:2899:14)

This is followed by a re-initialization of the editor.

Additionally, the newly introduced automaticallyDispose option in wrapperConfig does not provide the expected solution for React.StrictMode. The editor is still initialized and rendered twice. However, setting automaticallyDispose to false now results in the application functioning as expected, with only one instance of the editor existing (despite an error being logged in the console):

automaticallyDispose=true

automaticallyDispose=false

[pbrostean]

#897 seems to confirm the second part of this issue.

[kaisalmen]

@pbrostean thank you. I will catch up with answering / looking into issues this week. Was occupied with other things last two weeks.

[kaisalmen]

@pbrostean I can re-produce the problem, but don't yet know why it happens. It is not completely broken, because it works for example here: https://typefox.github.io/monaco-languageclient/ghp_react_statemachine.html

[kaisalmen]

@pbrostean PR will come likely tomorrow. It is combination of not initialized model references in certain situations (wrapper) and wrong handling of onLoad in the useEffect (wrapper-react). Need to align tests and add new ones.

[kaisalmen]

@pbrostean PR #904 is up. It fixes way more than this problem, but it became necessary.