Programtically selecting image URL in Media Library modal

Question

I've been struggling with Backbone for a few hours now while I'm trying to select a custom image URL in the media modal. The idea is to have a button that I've coded already and when the user clicks on that button, we select a predefined image URL that makes the button enabled (which happens on selection automatically) which then the user can insert into their block (regardless of the block being used).

So far I haven't been able to find much that can allow me to select an image URL (not an uploaded image) programmatically.

I've looked into methods like this https://github.com/WordPress/WordPress/blob/d533b76ef848528304a5ef08b82cc6e674eeb3cc/wp-includes/js/media-views.js#L3075 but to no avail. Does anyone have any pointers or past experience that can help me?

EDIT: Another method that can work here is to not use the selection but to at least have a way to return the image URL back to the block from the modal.

Answer 1

I found this answer, it can be done like this:

const state = this.state();
const selection = state.get( 'selection' );
selection.add({ url: 'http://www2.cnrs.fr/sites/communique/image/mona_unvarnish_web_image.jpg' });

Where this is an instance of wp.media.view.MediaFrame.Select

Hope it helps someone!