Image browse dialog is not opening.

[prajyod]

I want the images to be loaded from another source and tried fetching those by updating asset manager like this

assetManager: {
upload: false, // Disable default upload
autoAdd: true,
openAssetsOnDrop: true, // Open assets on drop
custom: {
open: async (props) => {
// Fetch images from an external URL
try {
const response = await fetch('http://127.0.0.1:8001/fetch-images');
const images = await response.json();
const assets = images.map((img: {url:string;title:string}) => ({ src: img.url, name: img.title }));
editor.AssetManager.add(assets);
} catch (error) {
console.error('Error fetching images:', error);
}
props.close();
},
close: () => {
// Close the asset manager
}
}
},

editor.Commands.add('open-assets',{
run(editor){
editor.runCommand('open-assets',{target: editor.getSelected()});
},
});

Dialog is not getting opened and Im getting

index-CrlEcN-Y.js:9779 Uncaught RangeError: Maximum call stack size exceeded
at RegExp.test ()
at v (index-CrlEcN-Y.js:9779:6840)
at u.trigger (index-CrlEcN-Y.js:9779:9045)
at n.trigger (index-CrlEcN-Y.js:10300:43448)
at h.callRun (index-CrlEcN-Y.js:9804:65661)
at t.runCommand (index-CrlEcN-Y.js:10096:11498)
at t.run (index-CrlEcN-Y.js:10096:11081)
at n.runCommand (index-CrlEcN-Y.js:10300:41726)
at W.run (index-CrlEcN-Y.js:10544:3001)
at h.callRun (index-CrlEcN-Y.js:9804:65924)

[prajyod]

@artf @lexoyo @danstarns

[prajyod]

I have overcomplicated the code I think, it is fairly simple to upload image from another source.
inside grapejs.init

interface ImageData{
  id: number;
  title: string;
  url: string;
}
const fetchImages = async() => {
  const response = await fetch('http://127.0.0.1:8001/fetch-images/');
  
const images: ImageData[] = await response.json();

  const assetManager = editor.AssetManager;
  assetManager.add(images.map(image => ({
    type: 'image',
    src: `http://127.0.0.1:8001/${image.url}`,
    title: image.title,
  })));
};

fetchImages();