How to use ketcher with typescript

[mwbouwkamp-mendix]

Hi,

I am having issues of using ketcher with typescript. Mostly because I am not sure how to define my types. Does anyone have an example?

Adding the iframe to the page is not the problem, but I am struggling with interacting with it (e.g., setting the structure or listening to changes)

Getting the iframe is also not the problem (I can get the ketcherFrame via ref.current, see below), but how to get the ketcher object?

    useEffect(() => {
        const ketcherFrame = ref.current;
        if (!ketcherFrame) {
            return;
        }

        ketcher = ketcherFrame.contentWindow?.ketcher;    // <-- Gives error Property 'ketcher' does not exist on type 'Window'.

        if (!ketcher) {
            console.error("No ketcher");
        }

        ketcher.editor.on('change', function(){
            console.log('changeeeeed!')
        });
        
    }, []);

Regards
Marco

[AndreiMazol]

Hi @mwbouwkamp-mendix ,

Ketcher packages provide all required types so you should cast your object . Please look at https://github.com/epam/ketcher/blob/master/example/src/App.tsx for example (onInit handler). In your case you should do something like this:
ketcher = (ketcherFrame.contentWindow as any).ketcher as Ketcher

but it will work only if your ketcher app is hosted correctly.
if you get an error in runtime please look at #722.

Best regards,
Ketcher team

[mwbouwkamp-mendix]

Hi @AndreiMazol,

Thank you for your reply. I added the casting and that does remove the error in my IDE. However, when I log ketcher to the console it is undefined.

Note: I am generating the ketcher editor in the UI. That part is working. It is interacting with the editor that is not working.

Regards,
Marco

[AndreiMazol]

Hi @mwbouwkamp-mendix ,

As I wrote before I guess it is a security issue. for details see #722 (comment)

Regards,
Andrei

[mwbouwkamp-mendix]

Hey @AndreiMazol

Thank you for your answer. I have ketcher in a sub-folder in the src folder of my project. I would say that counts as the same domain, right? Any suggestions?

Regards,
Marco

[AndreiMazol]

Hey @mwbouwkamp-mendix,

In such case I guess that the reason of this behavior is the fact that ketcher instance is not ready. to check this theory please try to get it manually after loading iframe by using dev tools console or wrap the code in setTimeout with delay.

Regards,
Andrei

[mwbouwkamp-mendix]

That seems to be the issue indeed