Conversation
|
The preview deployment for Loomy UI is in progress. 🟡 Open Build Logs | Open Application Logs Last updated at: 2026-04-30 22:31:52 CET |
There was a problem hiding this comment.
Pull request overview
This PR extends the board editor’s Yjs collaboration layer to synchronize Excalidraw file blobs (images) alongside elements, and wires the frontend to register incoming files so image elements load reliably for all peers (including from legacy snapshots).
Changes:
- Added Yjs bridge support for files (
FileJson,applyFilesToYMap,readFilesFromYMap) and improved element “echo” suppression to avoid mid-drag snap-back. - Updated board pages and collab hook to sync, observe, and seed files into Excalidraw via
addFiles, plus a combinedsyncLocalChangeswriter. - Added/expanded Vitest coverage for file syncing and the echo-suppression regression cases.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/frontend/src/pages/board/BoardPage.tsx | Registers remote/seeded files with Excalidraw and persists files into the saved snapshot while syncing files+elements together. |
| apps/frontend/src/pages/board/SharedBoardPage.tsx | Extends shared-board initial data to include files so shared view can render images. |
| apps/frontend/src/lib/collab/yjs-bridge.ts | Introduces file Y.Map helpers and changes element equality to suppress drift-only echoes. |
| apps/frontend/src/lib/collab/yjs-bridge.test.ts | Adds regression tests for echo suppression and file map syncing behavior. |
| apps/frontend/src/hooks/useBoardContent.ts | Extends persisted snapshot type to include files. |
| apps/frontend/src/hooks/useBoardCollab.ts | Adds file observation/callbacks, file sync helpers, and combined local sync transaction. |
| apps/frontend/package.json | Bumps frontend version to 0.4.0. |
| apps/frontend/package-lock.json | Updates lockfile version fields to match package.json version bump. |
Files not reviewed (1)
- apps/frontend/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+194
to
+204
| // Register every known file first. If an image element references | ||
| // a fileId whose blob hasn't reached this client yet, Excalidraw | ||
| // marks the element as not-fully-loaded and disables interaction — | ||
| // the peer who didn't add the image can't move it. addFiles is | ||
| // idempotent, so calling it on every remote elements update is | ||
| // safe and only meaningful when a new file actually landed. | ||
| const files = readAllFilesRef.current?.() ?? []; | ||
| if (files.length > 0) { | ||
| excalidrawAPI.addFiles( | ||
| files as unknown as Parameters<ExcalidrawAPI["addFiles"]>[0], | ||
| ); |
Comment on lines
354
to
358
| const content: ExcalidrawSnapshot = { | ||
| elements: [...latestElementsRef.current], | ||
| appState: latestAppStateRef.current as ExcalidrawSnapshot["appState"], | ||
| files: latestFilesRef.current, | ||
| yjs_update: encodeYjsState(), |
Comment on lines
+162
to
+165
| doc.transact(() => { | ||
| if (files) applyFilesToYMap(doc, yfiles, files); | ||
| applyElementsToYMap(doc, ymap, elements); | ||
| }, LOCAL_ORIGIN); |
Comment on lines
80
to
+96
| function elementsEqual(a: ElementJson, b: ElementJson): boolean { | ||
| // Fast path — matching versionNonce always implies identical content, | ||
| // so we can skip the structural compare on the hot drag path. | ||
| if ( | ||
| typeof a.versionNonce === "number" && | ||
| typeof b.versionNonce === "number" | ||
| typeof b.versionNonce === "number" && | ||
| a.versionNonce === b.versionNonce | ||
| ) { | ||
| return a.versionNonce === b.versionNonce; | ||
| return true; | ||
| } | ||
| return JSON.stringify(a) === JSON.stringify(b); | ||
| // Slow path — Excalidraw sometimes bumps an element's version / | ||
| // versionNonce without changing visible content (e.g. when applying | ||
| // an inbound updateScene). If we treated those as different, we'd | ||
| // echo a "no-op" change back to the peer, and that echo lands on | ||
| // their canvas mid-drag and snaps them back to the pre-drag spot. | ||
| return canonicalize(a) === canonicalize(b); | ||
| } |
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
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.
This pull request implements robust support for collaborative image/file synchronization in the board editor, ensuring that image blobs (files) are reliably shared and loaded across all peers. It introduces new logic for managing files in the Yjs-based collaboration layer, updates the frontend to handle file state alongside elements, and adds comprehensive tests to prevent regression bugs related to file and element syncing.
Collaboration and Synchronization Enhancements:
FileJsontype,applyFilesToYMap, andreadFilesFromYMapfunctions, and updated the collaboration hook (useBoardCollab) to handle file syncing, observation, and callbacks. [1] [2] [3] [4] [5]API and Data Model Updates:
filesfield, ensuring that image data is preserved and loaded even for legacy boards. [1] [2] [3]Testing and Regression Prevention:
versionNonce,version, orupdatedfields change), preventing mid-drag snap-back bugs and unnecessary updates. [1] [2]Internal Refactoring:
syncLocalChangesfunction, ensuring atomic updates of elements and files and preventing race conditions where an image element might reference a file not yet present. [1] [2] [3]These changes collectively ensure a smoother, more reliable collaborative editing experience, especially when working with images and other file-based elements.