jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/src/automerge
History
Jeff Emmett 0e812be6b1 fix: properly validate tldraw fractional indexing format 
The previous validation allowed "b1" which is invalid because 'b' prefix
expects 2-digit integers (10-99), not 1-digit. This caused ValidationError
when selecting old format content.

Now validates that:
- 'a' prefix: 1 digit (a0-a9)
- 'b' prefix: 2 digits (b10-b99)
- 'c' prefix: 3 digits (c100-c999)
- etc.

Invalid indices are converted to 'a1' as a safe default.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 		2025-12-04 06:30:50 -08:00
..
AutomergeToTLStore.ts fix: properly validate tldraw fractional indexing format 2025-12-04 06:30:50 -08:00
CloudflareAdapter.ts feat: move Mycelial Intelligence to permanent UI bar + fix ImageGen RunPod API 2025-11-27 23:57:26 -08:00
MinimalSanitization.ts fix: properly validate tldraw fractional indexing format 2025-12-04 06:30:50 -08:00
README.md refactor: remove OddJS dependency and fix Automerge sync 2025-11-16 20:19:02 -07:00
TLStoreToAutomerge.ts prevent coordinate collapse on reload 2025-11-16 03:03:39 -07:00
default_store.ts everything working in dev 2025-11-10 11:06:13 -08:00
documentIdMapping.ts feat: fix Holon shape H3 validation + offline persistence + geometry error handling 2025-11-29 21:36:02 -08:00
index.ts everything working in dev 2025-11-10 11:06:13 -08:00
useAutomergeStoreV2.ts feat: move Mycelial Intelligence to permanent UI bar + fix ImageGen RunPod API 2025-11-27 23:57:26 -08:00
useAutomergeSync.ts final update fix old data conversion 2025-11-10 15:38:53 -08:00
useAutomergeSyncRepo.ts fix: accept all valid tldraw fractional indices (b1, c10, etc.) 2025-12-04 04:01:35 -08:00

README.md

Automerge Integration for TLdraw

This directory contains the Automerge-based sync implementation that replaces the TLdraw sync system.

Files

  • AutomergeToTLStore.ts - Converts Automerge patches to TLdraw store updates
  • TLStoreToAutomerge.ts - Converts TLdraw store changes to Automerge document updates
  • useAutomergeStoreV2.ts - Core React hook for managing Automerge document state with TLdraw
  • useAutomergeSync.ts - Main sync hook that replaces useSync from TLdraw (uses V2 internally)
  • CloudflareAdapter.ts - Adapter for Cloudflare Durable Objects and R2 storage
  • default_store.ts - Default TLdraw store structure for new documents
  • index.ts - Main exports

Benefits over TLdraw Sync

  1. Better Conflict Resolution: Automerge's CRDT nature handles concurrent edits more elegantly
  2. Offline-First: Works seamlessly offline and syncs when reconnected
  3. Smaller Sync Payloads: Only sends changes (patches) rather than full state
  4. Cross-Session Persistence: Better handling of data across different devices/sessions
  5. Automatic Merging: No manual conflict resolution needed

Usage

Replace the TLdraw sync import:

// Old
import { useSync } from "@tldraw/sync"

// New
import { useAutomergeSync } from "@/automerge/useAutomergeSync"

The API is identical, so no other changes are needed in your components.

Cloudflare Integration

The system uses:

  • Durable Objects: For real-time WebSocket connections and document state management
  • R2 Storage: For persistent document storage
  • Automerge Network Adapter: Custom adapter for Cloudflare's infrastructure

Migration

To switch from TLdraw sync to Automerge sync:

  1. Update the Board component to use useAutomergeSync
  2. Deploy the new worker with Automerge Durable Object
  3. The CloudflareAdapter will automatically connect to /connect/{roomId} via WebSocket

The migration is backward compatible - the system will handle both legacy and new document formats.