From 211416bc900a0aa28285814d19bc3903f88aa7c2 Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Mon, 22 Jun 2026 07:21:01 +0000
Subject: [PATCH] feat(crdt): Create useYjsBinding React hook

---
 frontend/src/crdt/useYjsBinding.ts | 31 ++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 frontend/src/crdt/useYjsBinding.ts

diff --git a/frontend/src/crdt/useYjsBinding.ts b/frontend/src/crdt/useYjsBinding.ts
new file mode 100644
index 0000000..8325afd
--- /dev/null
+++ b/frontend/src/crdt/useYjsBinding.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import * as Y from 'yjs';
+import { YjsDocument } from './YjsDocument';
+
+export const useYjsBinding = (yjsDoc: YjsDocument) => {
+  const [doc, setDoc] = useState<Y.Doc>(yjsDoc.doc);
+  
+  useEffect(() => {
+    const handleUpdate = (update: Uint8Array, origin: any, doc: Y.Doc) => {
+      // Trigger re-render by updating state
+      setDoc({} as Y.Doc); // Force re-render
+      
+      // Update rbush index
+      updateRbushIndex(yjsDoc);
+    };
+
+    yjsDoc.doc.on('update', handleUpdate);
+    
+    return () => {
+      yjsDoc.doc.off('update', handleUpdate);
+    };
+  }, [yjsDoc]);
+
+  return doc;
+};
+
+const updateRbushIndex = (yjsDoc: YjsDocument) => {
+  // Implementation for updating rbush index with Yjs changes
+  // This would integrate with the canvas rendering system
+  console.log('Updating rbush index with Yjs changes');
+};
\ No newline at end of file