Render pasted whiteboard images in playback - #367
Open
imdt-claudiop wants to merge 4 commits into
Open
Conversation
The helper that resolves the uploaded file path from a pasted image shape passed the source straight to String.match, so a truthy non string value threw a TypeError. Return null instead, matching the other fall through paths. Cover the two gaps in the helper tests: a shape carrying no asset id, and a non string source. Widen the whiteboard package mock used by the test setup so an export it does not stub throws with its own name, instead of silently resolving to undefined.
The buildNotes regex used . which does not match newlines in JavaScript. BlockNote exports notes.html with multiline body content (image tags and paragraph tags on separate lines), causing the regex to fail and the notes panel to render empty. Replace . with [\s\S] to match any character including newlines.
Pasted images in shared notes have arbitrary natural dimensions (e.g. 999px wide webcam strips) and overflowed the 304px notes panel, getting clipped on the right. Add max-width:100% to the notes img rule so images scale down to fit the panel.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Reconstruct tldraw image assets from the validated
bbbImageSrcstored in recorded image shapes.The playback now:
buildFileURL, preserving relative deployments andMEDIA_ROOT_URL;A Jest setup mock was also added because the current tldraw dependency loads ESM-only
nanoidmodules that the existing react-scripts test environment cannot parse directly.Why
Pasted whiteboard images are recorded as shapes, while their tldraw asset records are intentionally reconstructed by each renderer. The presentation 2.3 playback created the shape without rebuilding its asset, leaving an empty image container.
Tests
CI=true npx react-scripts testEvidence
Recording:
986a45d2a620695c3a0bdca939a8ad4ca6a9e2b9-1785814812863PASTE-IMG 25385image renders inside the whiteboard..tl-imagewith the expected published upload URL.Before:
After:
Animated preview below - click the GIF to open the full-length MP4 with playback controls: