[Bug]: Custom embeds blank on canvas load

elstob commented 5 days ago

What happened?

There appears to be a race condition bug with rendering custom embeds.

I've created a custom embed as per the example - these embeds are simple web page containing a video element hosted on a localhost atm but any domain should work. Initial pasting of the URL loads the embed as intended, but reloading the page results in the shape being created without the iframe embed inside.

https://github.com/user-attachments/assets/a5edea77-e01b-47ad-87e5-95823abb7fd8

I've tracked it down to line 182 of EmbedShapeUtil - this class instantiated with embedDefinitions to DEFAULT_EMBED_DEFINITIONS which means that when the shapes are initially loaded/rendered the matching custom definition isn't present and the ternary on 182 resolves to false.

Next setEmbedDefinitions is called via useOnMount in InsideOfEditorAndUiContext, this updates EmbedShapeUtil definitions to now include the custom definition, which means the next time the embed component is rendered (on resize etc) then the iframe is now rendered as embedInfo?.definition now resolves to true.

How can we reproduce the bug?

Create a custom embed
Add a custom embed of that type to a persisted canvas
Reload the canvas
Note the embed shape is present/selectable but it has no embed content

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Where did this happen?

The developer package

Contact Details

david.elstob@vidsy.co

Code of Conduct

[X] I agree to follow this project's Code of Conduct

linear[bot] commented 5 days ago

TLD-2866 [Bug]: Custom embeds blank on canvas load

MitjaBezensek commented 2 days ago

Hey! Thanks for reporting this, made a PR that should solve this. Maybe you can try the canary release when it gets merged?

tldraw / tldraw