canvu-react 0.4.8 → 0.4.9

package/dist/realtime.cjs

@@ -2398,6 +2398,30 @@ function prepareRealtimeItems(items) {
     return null;
   }
 }
+function getRealtimeItemId(item) {
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function serializeRealtimeItem(item) {
+  try {
+    return JSON.stringify(sanitizeRealtimeItem(item));
+  } catch {
+    return null;
+  }
+}
+function resolvePendingDraftItemIds(board, items) {
+  const pendingIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const id = getRealtimeItemId(item);
+    if (!id) continue;
+    const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+    const serialized = serializeRealtimeItem(item);
+    if (!confirmedSerialized || !serialized || serialized !== confirmedSerialized) {
+      pendingIds.add(id);
+    }
+  }
+  return pendingIds.size > 0 ? Array.from(pendingIds) : void 0;
+}
 function useRealtimeSession(options) {
   const {
     url,
@@ -2588,7 +2612,8 @@ function useRealtimeSession(options) {
     }
     const board = boardRef.current;
     const draft = localDraftRef.current;
-    const draftToWrite = board && draft.yDocState == null ? { ...draft, yDocState: encodeYDocState(board) } : draft;
+    const canEncodeYDocState = board && draft.yDocState == null && sameSerializedItems(readVectorItems(board.yItems), draft.items);
+    const draftToWrite = canEncodeYDocState ? { ...draft, yDocState: encodeYDocState(board) } : draft;
     writeRealtimeOfflineDraft(draftToWrite);
   }, [clearDraftPersistSchedule, roomId]);
   const scheduleDraftPersistence = react.useCallback(() => {
@@ -2728,13 +2753,26 @@ function useRealtimeSession(options) {
       }, DOCUMENT_FLUSH_DEBOUNCE_MS);
     }, DOCUMENT_FLUSH_DEBOUNCE_MS);
   }, [clearDocumentFlushSchedule, flushQueuedDocument]);
-  const queueDocumentSend = react.useCallback((items) => {
-    pendingLocalItemsRef.current = items;
-    queuedDirtyRef.current = true;
-    setHasPendingDocumentSync(true);
-    setHasLocalOfflineDraft(true);
-    scheduleDocumentFlushRef.current();
-  }, []);
+  const queueDocumentSend = react.useCallback(
+    (items) => {
+      pendingLocalItemsRef.current = items;
+      queuedDirtyRef.current = true;
+      setHasPendingDocumentSync(true);
+      setHasLocalOfflineDraft(true);
+      const board = boardRef.current;
+      const draftItems = sanitizeRealtimeItems(items);
+      setLocalDraftRef.current({
+        roomId,
+        baseRevision: currentRevisionRef.current,
+        items: draftItems,
+        updatedAt: nowMs(),
+        pendingIds: board ? resolvePendingDraftItemIds(board, draftItems) : void 0
+      });
+      scheduleDraftPersistenceRef.current?.();
+      scheduleDocumentFlushRef.current();
+    },
+    [roomId]
+  );
   const applyDraftSnapshot = react.useCallback(
     (draft, options2) => {
       const board = boardRef.current;
@@ -2898,6 +2936,25 @@ function useRealtimeSession(options) {
   setLocalDraftRef.current = setLocalDraft;
   const scheduleDraftPersistenceRef = react.useRef(scheduleDraftPersistence);
   scheduleDraftPersistenceRef.current = scheduleDraftPersistence;
+  const persistLocalDraftRef = react.useRef(persistLocalDraft);
+  persistLocalDraftRef.current = persistLocalDraft;
+  react.useEffect(() => {
+    const persistDraft = () => {
+      persistLocalDraftRef.current();
+    };
+    const handleVisibilityChange = () => {
+      if (window.document.visibilityState === "hidden") persistDraft();
+    };
+    window.addEventListener("pagehide", persistDraft);
+    window.document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      window.removeEventListener("pagehide", persistDraft);
+      window.document.removeEventListener(
+        "visibilitychange",
+        handleVisibilityChange
+      );
+    };
+  }, []);
   react.useEffect(() => {
     if (boardRef.current) {
       boardRef.current.doc.destroy();