feat: Sync local storage state across tabs when out of sync

[ad1992]

An attempt to fix #2791

• Sync elements
• Sync appstate
• sync username
• sync language
• sync library

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/excalidraw/excalidraw/HWxvE9bWPfNYYXM9Dt6bjBijwbRY
✅ Preview: https://excalidraw-git-aakansha-sync-excalidraw.vercel.app

[dwelle]

I've also added window focus event. This will catch cases of having both tabs visible or partially visible.

[dwelle]

The failing tests were caused because blurring the wysiwyg was for some reason firing change event on window, which in turn overwritten the elements with empty [] because in tests we don't persist state to LS.

But this makes me wonder — the change event we're now listening for will be triggered in many cases like picking a file from the filesystem, thus potentially overwriting the state with stale data in case the LS isn't updated in time. This could happen, since dialogs are generally thread blocking. Also could happen once we move to IDB which is async.

Also note that even visibilitychange alone could be affected by this.

[dwelle]

Another, related thing: we need to disable the syncing when collaborating, because we're not syncing to LS during collab.

[ad1992]

I've also added window focus event. This will catch cases of having both tabs visible or partially visible.

Why do we need focus event ? coz this will trigger LS sync when ever window gains focus even when visible eg switching focus from devtools to Excalidraw window, also the visibilityChange will be triggered when ever the page becomes fully visible from partial visible/minimised state as well.

[dwelle]

Why do we need focus event ? coz this will trigger LS sync when ever window gains focus even when visible eg switching focus from devtools to Excalidraw window, also the visibilityChange will be triggered when ever the page becomes fully visible from partial visible/minimised state as well.

visibilityChange will give us only a subset of focus (except for one special case). We want to handle cases like when you have both tabs visible (on one or two monitors) and switch between them.

Either way, we want to make the syncing robust enough so we don't have to think whether change event can cause race conditions. It must work properly no matter what.