Async input rules to convert pasted image URLs?

1

I’d like to automate conversion of pasted image URLs to an <img>. I can do this synchronously via the existing inputRule mechanism for URLs that end in “jpg”, “png”, “gif”, etc. Many image URLs today though are dynamic and don’t have this type of regex-able solution. In order to detect if it is an image AND in order to get the image width & height I need to create an image object and wait for the onload. I think this means that I need my inputRule to be asynchronous.

How can I achieve this? Any thoughts/help would be greatly appreciated!

1 Like
2

I don’t think input rules match pasted text, so just forget about input rules and write a regular plugin to do this. The handlePaste prop should provide a good starting point.

3

Woops of course!

Looks like I can detect if it is a URL and return true from the handler. Then asynchronously I can determine if it is a normal URL and should turn into a link OR references an image and should get turned into an <img>. I think this should work!