📝 DocProvider Component

The <doc-provider></doc-provider> Component provides a declarative interface to Yjs-based collaborative document editing.

Usage

<doc-provider src="amnesia/post.md"></doc-provider>

Features

• Lazy connection opening (connects on first consumer subscription)
• Automatic connection teardown with debounced reconnect handling
• Yjs CRDT-based document state management
• ReadableStream interface for async iteration:

for await (const doc of this.closest("doc-provider")) {
  const yText = doc.getText('content');
  console.log("Document text:", yText.toString());
}

• CustomEvent dispatching for incoming messages
• Support for src attribute to specify document path
• Real-time collaborative text editing via Server-Sent Events + POST

Demo