jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/src/automerge
History
Jeff Emmett cd58b1c1cd fix: accept all valid tldraw fractional indices (b1, c10, etc.) 
The index validation was incorrectly rejecting valid tldraw fractional
indices like "b1", "c10", etc. tldraw's fractional indexing uses:
- First letter (a-z) indicates integer part length (a=1 digit, b=2 digits)
- Followed by alphanumeric characters for value and jitter

This was causing ValidationError on production for Embed shapes with
index "b1". Fixed regex in all validation functions to accept any
lowercase letter prefix, not just 'a'.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 		2025-12-04 04:01:35 -08:00
..
AutomergeToTLStore.ts fix: accept all valid tldraw fractional indices (b1, c10, etc.) 2025-12-04 04:01:35 -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: accept all valid tldraw fractional indices (b1, c10, etc.) 2025-12-04 04:01:35 -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.