How to Build a Document Collaboration with Lovable

1Create a document collaboration schema in Supabase. Tables:
2
31. documents: id, title (text), blocks (jsonb default '[]'), version (int default 0), owner_id (references auth.users), last_edited_by (references auth.users nullable), last_edited_at (timestamptz), created_at
4
5Block structure (stored in blocks array):
6{ id: string (nanoid), type: 'paragraph' | 'heading1' | 'heading2' | 'code' | 'image' | 'divider', content: string, metadata: object, version: number }
7
82. document_members: id, document_id (references documents), user_id (references auth.users), role (text: owner|editor|viewer), invited_by (references auth.users nullable), joined_at, UNIQUE(document_id, user_id)
9
103. document_invitations: id, document_id, email (text), role (text), token (uuid default gen_random_uuid()), invited_by, status (text: pending|accepted|expired), created_at, expires_at (default now() + interval '7 days')
11
12RLS:
13- documents: SELECT for owners and document_members; UPDATE for owners and editors (role in owner, editor)
14- document_members: SELECT for members of same document; INSERT/DELETE for owners
15- document_invitations: SELECT by email = auth.jwt()->>'email' or document owner
16
17Trigger: on UPDATE to documents, set last_edited_by = auth.uid(), last_edited_at = now()
18
19Index: CREATE INDEX ON document_members(user_id, document_id);

1// src/hooks/useDocumentRealtime.ts
2import { useEffect, useRef, useState, useCallback } from 'react'
3import { supabase } from '@/lib/supabase'
4import { useAuth } from '@/hooks/useAuth'
5
6const CURSOR_COLORS = ['#e63946', '#2a9d8f', '#e9c46a', '#457b9d', '#a8dadc', '#f4a261']
7
8type CollaboratorState = { user_id: string; email: string; block_id: string | null; color: string }
9type BlockEditEvent = { block_id: string; content: string; version: number; user_id: string }
10
11export function useDocumentRealtime(documentId: string | null) {
12  const { user } = useAuth()
13  const [collaborators, setCollaborators] = useState<CollaboratorState[]>([])
14  const [incomingEdit, setIncomingEdit] = useState<BlockEditEvent | null>(null)
15  const channelRef = useRef<ReturnType<typeof supabase.channel> | null>(null)
16
17  useEffect(() => {
18    if (!documentId || !user?.id) return
19
20    const color = CURSOR_COLORS[parseInt(user.id.replace(/-/g, '').slice(0, 8), 16) % CURSOR_COLORS.length]
21
22    const channel = supabase.channel(`doc:${documentId}`, { config: { presence: { key: user.id } } })
23    channelRef.current = channel
24
25    channel
26      .on('presence', { event: 'sync' }, () => {
27        type P = { user_id: string; email: string; block_id: string | null; color: string }
28        const state = channel.presenceState<P>()
29        const list = Object.values(state).flat().filter((c) => c.user_id !== user.id)
30        setCollaborators(list)
31      })
32      .on('broadcast', { event: 'block_edit' }, (msg) => {
33        const payload = msg.payload as BlockEditEvent
34        if (payload.user_id !== user.id) setIncomingEdit(payload)
35      })
36      .subscribe(async (status) => {
37        if (status === 'SUBSCRIBED') {
38          await channel.track({ user_id: user.id, email: user.email ?? '', block_id: null, color })
39        }
40      })
41
42    return () => { supabase.removeChannel(channel) }
43  }, [documentId, user?.id])
44
45  const trackBlock = useCallback(async (blockId: string | null) => {
46    if (!channelRef.current || !user?.id) return
47    const color = CURSOR_COLORS[parseInt(user.id.replace(/-/g, '').slice(0, 8), 16) % CURSOR_COLORS.length]
48    await channelRef.current.track({ user_id: user.id, email: user.email ?? '', block_id: blockId, color })
49  }, [user?.id])
50
51  const broadcastEdit = useCallback((event: BlockEditEvent) => {
52    channelRef.current?.send({ type: 'broadcast', event: 'block_edit', payload: event })
53  }, [])
54
55  return { collaborators, incomingEdit, trackBlock, broadcastEdit }
56}

1Build the document editor at src/components/DocumentEditor.tsx.
2
3Requirements:
4- Fetch document from Supabase on load, parse blocks from the JSONB column
5- Render each block based on its type:
6  - paragraph: a ContentEditable div or Textarea
7  - heading1: a large ContentEditable div (text-3xl font-bold)
8  - heading2: a medium ContentEditable div (text-xl font-semibold)
9  - code: a Textarea with font-mono bg-muted
10  - divider: an hr element (not editable)
11- Each block wrapper shows collaborator badges (Avatar with initials, colored border) for users whose block_id matches this block's id
12- Clicking a block: call trackBlock(block.id) to update Presence
13- On input change: call broadcastEdit({ block_id, content: newContent, version: block.version, user_id }) immediately (no debounce — for feel)
14- On blur: save the updated block to Supabase using UPDATE documents SET blocks = new_blocks_array, version = version + 1 WHERE id = documentId
15- When incomingEdit arrives from useDocumentRealtime: update that block's content in local state only (do not save to DB — the other user will save on their blur)
16- Block is soft-locked if any collaborator.block_id === block.id. Show a subtle colored outline and a 'Editing' label. Still allow editing but warn on conflict.
17- Add a '+' button between blocks that opens a small menu (Command) to insert a new block of any type
18- Support drag-to-reorder blocks using dnd-kit (sortable). On reorder, save the new blocks array to Supabase.

1Build a document sharing system.
2
3Requirements:
4
51. Add a 'Share' Button in the document header. Clicking opens a shadcn/ui Dialog.
6
72. Sharing Dialog:
8   - Show current members as a list: Avatar, email, role Badge (owner/editor/viewer), and 'Remove' Button for non-owners
9   - Invite input: email text Input + role Select (Editor/Viewer) + 'Send Invite' Button
10   - On invite: INSERT into document_invitations, then invoke 'send-doc-invite' Edge Function
11   - Copy link Button: copies a shareable URL https://yourapp.com/doc/{documentId} to clipboard
12
133. Edge Function supabase/functions/send-doc-invite/index.ts:
14   - Accept POST: { invitation_id: string }
15   - Fetch invitation, document title, and inviter's email from Supabase
16   - Send email via Resend: subject 'You've been invited to edit {document_title}', body with accept link https://yourapp.com/join-doc?token={invitation.token}
17
184. Accept invitation page at src/pages/JoinDocument.tsx:
19   - Read token from URL query params
20   - If user is logged in: look up invitation by token, INSERT into document_members with the invitation's role, set invitation status='accepted', redirect to the document
21   - If user is not logged in: redirect to signup/login with the token preserved in the URL, then complete on return

1Add block-level conflict resolution to the document editor.
2
3Requirements:
4
51. When saving a block on blur, include a version check in the UPDATE:
6   UPDATE documents
7   SET blocks = new_blocks_array, version = version + 1
8   WHERE id = documentId AND (blocks->block_index->>'version')::int = expected_version
9   Use supabase.from('documents').update() and check if data is null (update matched 0 rows = conflict)
10
112. If the update returns 0 rows (conflict detected):
12   a. Fetch the latest document from Supabase
13   b. Find the conflicting block in the latest version
14   c. Open a ConflictDialog showing two columns: 'Your version' (left) and 'Current version from {editor name}' (right)
15   d. Two Buttons: 'Keep mine' (overwrites current with user's content, increments version) and 'Keep theirs' (discards user's edit, updates local state)
16   e. No 'Merge' option — for text blocks, ask the user to manually merge the content if needed
17
183. Add a version indicator in the document header: 'Version {version}' that increments when any save occurs. Clicking opens a simple version list from document_snapshots if that table exists.
19
204. Visual feedback: show a subtle 'Saving...' → 'Saved' badge in the header using a state variable that tracks pending saves. On conflict, show 'Conflict — review needed' in amber.