NoteFlow — Edición Colaborativa con Yjs CRDT

// src/components/CollaborativeEditor.tsx — NoteFlow editor con presencia
import { useEditor, EditorContent } from "@tiptap/react";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
import { IndexeddbPersistence } from "y-indexeddb";

const NOTEFLOW_USERS = {
  ana:    { name: "Ana García",     color: "#4F46E5" },
  carlos: { name: "Carlos Ruiz",    color: "#0EA5E9" },
  laura:  { name: "Laura Sánchez", color: "#10B981" },
  marcos: { name: "Marcos Torres", color: "#F59E0B" },
};

export function CollaborativeEditor({ documentId, userId }: Props) {
  // 1. Documento CRDT compartido entre todos los clientes
  const doc = useMemo(() => new Y.Doc(), []);

  // 2. Persistencia offline en IndexedDB (1 línea)
  const _ = useMemo(() =>
    new IndexeddbPersistence(`noteflow-${documentId}`, doc), [doc, documentId]);

  // 3. WebSocket provider (solo WSS :443, sin WebRTC)
  const provider = useMemo(() =>
    new WebsocketProvider(
      "wss://collab.noteflow.app",
      documentId,
      doc,
      { params: { token: getAuthToken() } }
    ), [doc, documentId]);

  // 4. Awareness: nombre + color del cursor visible para otros
  useEffect(() => {
    provider.awareness.setLocalStateField("user", NOTEFLOW_USERS[userId]);
  }, [provider, userId]);

  // 5. Editor Tiptap con CRDT (sin history nativo → Yjs lo gestiona)
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ history: false }),   // ← CRÍTICO
      Collaboration.configure({ document: doc }),
      CollaborationCursor.configure({ provider,
        user: NOTEFLOW_USERS[userId] }),
    ],
  });

  // Cleanup al desmontar
  useEffect(() => () => {
    provider.destroy(); doc.destroy();
  }, [doc, provider]);

  return (
    <div className="editor-wrapper">
      <PresenceBar provider={provider} />
      <EditorContent editor={editor} />
      <ConnectionBadge provider={provider} />
    </div>
  );
}