@apollohg/react-native-rich-text-editor 2.0.0 → 2.0.2

package/src/useRichTextEditorUpdates.tsx

@@ -7,7 +7,7 @@ import {
 import { applyRenderPatch, collectAtomInstanceBlocks } from './atomInstances';
 import { allocateEditorUpdateRevision } from './EditorUpdateRevision';
 import { setActiveEditorToolbarFrameOwnerForEditor } from './EditorToolbar';
-import { useRichTextEditorState } from './useRichTextEditorState';
+import { type useRichTextEditorState } from './useRichTextEditorState';
 import {
     selectedAtomKeys,
     equalStringSets,
@@ -84,52 +84,59 @@ export function useRichTextEditorUpdates(
     const updateAtomSelection = useCallback(
         (selection: Selection, instances = atomStateRef.current.instances) => {
             const next = selectedAtomKeys(selection, instances);
-            setSelectedKeys((current) => (equalStringSets(current, next) ? current : next));
+            setSelectedKeys(current => (equalStringSets(current, next) ? current : next));
         },
-        []
+        [ atomStateRef, setSelectedKeys ]
     );
 
     const refreshAtomsFromUpdate = useCallback(
         (update: NativeEditorAtomicRenderSnapshot) => {
             const previous = atomStateRef.current;
+
             const source =
                 update.renderPatch != null &&
                 update.renderPatch.baseDocumentVersion !== previous.documentVersion
                     ? bridge.renderUpdate()
                     : update;
+
             if (
                 source.renderPatch != null &&
                 source.renderPatch.baseDocumentVersion !== previous.documentVersion
             ) {
                 return;
             }
+
             const blocks =
                 source.renderBlocks != null
                     ? source.renderBlocks
                     : applyRenderPatch(previous.blocks, {
-                          startIndex: source.renderPatch.startIndex,
-                          deleteCount: source.renderPatch.deleteCount,
-                          renderBlocks: source.renderPatch.renderBlocks,
-                      });
+                        startIndex: source.renderPatch.startIndex,
+                        deleteCount: source.renderPatch.deleteCount,
+                        renderBlocks: source.renderPatch.renderBlocks,
+                    });
+
             const patchedCollection =
                 source.renderPatch != null && previous.hasOnlyStableAtomKeys
                     ? collectAtomInstanceBlocks(
-                          source.renderPatch.renderBlocks,
-                          registeredAtomTypes
-                      )
+                        source.renderPatch.renderBlocks,
+                        registeredAtomTypes
+                    )
                     : null;
+
             const collection =
                 source.renderPatch != null && patchedCollection?.hasOnlyStableKeys
                     ? {
-                          instanceBlocks: applyRenderPatch(previous.instanceBlocks, {
-                              startIndex: source.renderPatch.startIndex,
-                              deleteCount: source.renderPatch.deleteCount,
-                              renderBlocks: patchedCollection.instanceBlocks,
-                          }),
-                          hasOnlyStableKeys: true,
-                      }
+                        instanceBlocks: applyRenderPatch(previous.instanceBlocks, {
+                            startIndex: source.renderPatch.startIndex,
+                            deleteCount: source.renderPatch.deleteCount,
+                            renderBlocks: patchedCollection.instanceBlocks,
+                        }),
+                        hasOnlyStableKeys: true,
+                    }
                     : collectAtomInstanceBlocks(blocks, registeredAtomTypes);
+
             const instances = collection.instanceBlocks.flat();
+
             const next = {
                 blocks,
                 instanceBlocks: collection.instanceBlocks,
@@ -137,19 +144,28 @@ export function useRichTextEditorUpdates(
                 documentVersion: source.documentVersion,
                 hasOnlyStableAtomKeys: collection.hasOnlyStableKeys,
             };
+
             atomStateRef.current = next;
+
             if (!equalAtomInstances(previous.instances, next.instances)) {
                 setAtomState(next);
             }
+
             updateAtomSelection(selectionRef.current, next.instances);
         },
-        [bridge, registeredAtomTypes, updateAtomSelection]
+        [ atomStateRef,
+            bridge,
+            registeredAtomTypes,
+            selectionRef,
+            setAtomState,
+            updateAtomSelection ]
     );
 
     useEffect(() => {
         const current = atomStateRef.current;
         const collection = collectAtomInstanceBlocks(current.blocks, registeredAtomTypes);
         const instances = collection.instances;
+
         const next = {
             blocks: current.blocks,
             instanceBlocks: collection.instanceBlocks,
@@ -157,12 +173,19 @@ export function useRichTextEditorUpdates(
             documentVersion: current.documentVersion,
             hasOnlyStableAtomKeys: collection.hasOnlyStableKeys,
         };
+
         atomStateRef.current = next;
+
         if (!equalAtomInstances(current.instances, instances)) {
             setAtomState(next);
         }
+
         updateAtomSelection(selectionRef.current, instances);
-    }, [registeredAtomTypes, updateAtomSelection]);
+    }, [ atomStateRef,
+        registeredAtomTypes,
+        selectionRef,
+        setAtomState,
+        updateAtomSelection ]);
 
     useLayoutEffect(() => {
         if (
@@ -172,18 +195,28 @@ export function useRichTextEditorUpdates(
         ) {
             return;
         }
+
         atomSeedEditorIdRef.current = editorId;
         refreshAtomsFromUpdate(bridge.renderUpdate());
-    }, [bridge, document.isReady, documentHandle, editorId, refreshAtomsFromUpdate]);
+    }, [ atomSeedEditorIdRef,
+        bridge,
+        document.isReady,
+        documentHandle,
+        editorId,
+        refreshAtomsFromUpdate ]);
 
     const applyTypedUpdateState = useCallback(
         (
             update: Pick<NativeEditorAtomicRenderSnapshot, 'selection' | 'activeState'>,
             isCurrent: () => boolean = () => true
         ) => {
-            if (!isCurrent()) return false;
+            if (!isCurrent()) {
+                return false;
+            }
+
             selectionRef.current = update.selection;
             updateAtomSelection(update.selection);
+
             if (
                 update.selection.type === 'text' &&
                 update.selection.anchorScalar != null &&
@@ -194,37 +227,74 @@ export function useRichTextEditorUpdates(
                     head: update.selection.headScalar,
                 };
             }
-            if (!isCurrent()) return false;
+
+            if (!isCurrent()) {
+                return false;
+            }
+
             const nextActiveState = update.activeState;
             activeStateRef.current = nextActiveState;
-            if (!isCurrent()) return false;
+
+            if (!isCurrent()) {
+                return false;
+            }
+
             setActiveState(nextActiveState);
-            if (!isCurrent()) return false;
+
+            if (!isCurrent()) {
+                return false;
+            }
+
             const key = stringifyCachedJson(nextActiveState);
+
             if (key !== activeStateKeyRef.current) {
-                if (!isCurrent()) return false;
+                if (!isCurrent()) {
+                    return false;
+                }
+
                 activeStateKeyRef.current = key;
-                if (!isCurrent()) return false;
+
+                if (!isCurrent()) {
+                    return false;
+                }
+
                 onActiveStateChangeRef.current?.(nextActiveState);
             }
+
             return isCurrent();
         },
-        [updateAtomSelection]
+        [ activeStateKeyRef,
+            activeStateRef,
+            onActiveStateChangeRef,
+            scalarSelectionRef,
+            selectionRef,
+            setActiveState,
+            updateAtomSelection ]
     );
 
     const applyUpdateState = useCallback(
         (updateJson: string | null | undefined) => {
-            if (typeof updateJson !== 'string' || updateJson.length === 0) return null;
+            if (typeof updateJson !== 'string' || updateJson.length === 0) {
+                return null;
+            }
+
             let parsed: Record<string, unknown>;
+
             try {
                 const candidate = JSON.parse(updateJson) as unknown;
-                if (!isRecord(candidate)) return null;
+
+                if (!isRecord(candidate)) {
+                    return null;
+                }
+
                 parsed = candidate;
             } catch {
                 return null;
             }
+
             const nextSelection = parseSelectionFromUpdate(parsed.selection);
             const nextActiveState = parseActiveStateFromUpdate(parsed.activeState);
+
             if (nextSelection && nextActiveState) {
                 applyTypedUpdateState({
                     selection: nextSelection,
@@ -236,67 +306,124 @@ export function useRichTextEditorUpdates(
                 activeStateRef.current = nextActiveState;
                 setActiveState(nextActiveState);
                 const key = stringifyCachedJson(nextActiveState);
+
                 if (key !== activeStateKeyRef.current) {
                     activeStateKeyRef.current = key;
                     onActiveStateChangeRef.current?.(nextActiveState);
                 }
             }
+
             return parsed;
         },
-        [applyTypedUpdateState]
+        [ activeStateKeyRef,
+            activeStateRef,
+            applyTypedUpdateState,
+            onActiveStateChangeRef,
+            selectionRef,
+            setActiveState ]
     );
 
     const pushEngineUpdateToView = useCallback(() => {
-        if (documentHandle.isDestroyed) return;
+        if (documentHandle.isDestroyed) {
+            return;
+        }
+
         const sourceEditorId = documentHandle.editorId;
         const sourceBindingGeneration = pushedUpdateBindingGenerationRef.current;
+
         const isCurrentSource = () => {
             const current =
                 sourceEditorId === currentPushedUpdateEditorIdRef.current &&
                 sourceBindingGeneration === pushedUpdateBindingGenerationRef.current;
+
             return current;
         };
+
         const allocation = allocateEditorUpdateRevision(pushRevisionRef.current);
+
         if ('error' in allocation) {
             bridge._emitAutonomousError(allocation.error);
+
             return;
         }
+
         const reset = bridge._pendingViewReset;
         const snapshot = bridge.renderUpdate();
+
         // renderUpdate can synchronously re-enter React and bind this
         // component to another handle. Do not let any side effect from A
         // reach B once that happens.
-        if (!isCurrentSource()) return;
+        if (!isCurrentSource()) {
+            return;
+        }
+
         refreshAtomsFromUpdate(snapshot);
-        if (!isCurrentSource()) return;
+
+        if (!isCurrentSource()) {
+            return;
+        }
+
         const updateJson = JSON.stringify(snapshot);
-        if (!isCurrentSource()) return;
+
+        if (!isCurrentSource()) {
+            return;
+        }
+
         if (!applyTypedUpdateState(snapshot, isCurrentSource)) {
             return;
         }
-        if (!isCurrentSource()) return;
+
+        if (!isCurrentSource()) {
+            return;
+        }
+
         lastPushedEngineRevisionRef.current = snapshot.documentVersion;
-        if (!isCurrentSource()) return;
+
+        if (!isCurrentSource()) {
+            return;
+        }
+
         pushRevisionRef.current = allocation.revision;
-        if (!isCurrentSource()) return;
+
+        if (!isCurrentSource()) {
+            return;
+        }
+
         setPushedUpdate({
             json: updateJson,
             resetJson: reset?.json,
             revision: allocation.revision,
             editorId: sourceEditorId,
         });
-        if (bridge._pendingViewReset === reset) bridge._pendingViewReset = null;
-    }, [applyTypedUpdateState, bridge, documentHandle, refreshAtomsFromUpdate]);
+
+        if (bridge._pendingViewReset === reset) {
+            bridge._pendingViewReset = null;
+        }
+    }, [ applyTypedUpdateState,
+        bridge,
+        currentPushedUpdateEditorIdRef,
+        documentHandle.editorId,
+        documentHandle.isDestroyed,
+        lastPushedEngineRevisionRef,
+        pushRevisionRef,
+        pushedUpdateBindingGenerationRef,
+        refreshAtomsFromUpdate,
+        setPushedUpdate ]);
 
     useLayoutEffect(() => {
         const pending = pendingFocusedRebindRef.current;
-        if (pending?.editorId !== editorId || !document.isReady) return;
+
+        if (pending?.editorId !== editorId || !document.isReady) {
+            return;
+        }
+
         pendingFocusedRebindRef.current = null;
 
         const snapshot = bridge.renderUpdate();
         const anchor = Math.min(pending.anchor, snapshot.scalarLength);
         const head = Math.min(pending.head, snapshot.scalarLength);
         const collapsed = anchor === head;
+
         const setSelection = (affinity: NativeEditorPositionAffinity) =>
             bridge.setSelection({
                 baseDocumentRevision: snapshot.documentVersion,
@@ -311,35 +438,46 @@ export function useRichTextEditorUpdates(
             try {
                 setSelection(collapsed ? 'after' : 'before');
             } catch (error) {
-                if (!collapsed || !isPositionInvalidError(error)) throw error;
+                if (!collapsed || !isPositionInvalidError(error)) {
+                    throw error;
+                }
+
                 setSelection('before');
             }
+
             pushEngineUpdateToView();
         } catch (error) {
-            if (!isPositionInvalidError(error)) throw error;
+            if (!isPositionInvalidError(error)) {
+                throw error;
+            }
         }
 
         setActiveEditorToolbarFrameOwnerForEditor(toolbarFrameOwnerId, true);
         onFocusRef.current?.();
-    }, [bridge, document.isReady, editorId, pushEngineUpdateToView, toolbarFrameOwnerId]);
+    }, [ bridge,
+        document.isReady,
+        editorId,
+        onFocusRef,
+        pendingFocusedRebindRef,
+        pushEngineUpdateToView,
+        toolbarFrameOwnerId ]);
 
     // A pending update is owned by the handle that produced its snapshot.
     // Drop it when this component rebinds, so no old session state reaches
     // the next native view binding.
     useEffect(() => {
-        setPushedUpdate((current) => {
-            if (current == null || current.editorId === editorId) return current;
+        setPushedUpdate(current => {
+            if (current == null || current.editorId === editorId) {
+                return current;
+            }
+
             return null;
         });
-    }, [editorId]);
+    }, [ editorId, setPushedUpdate ]);
 
     const pendingViewReset = bridge._pendingViewReset;
 
-    // After a JS-driven engine change (controlled apply, remote commit,
-    // document-API mutation) the view learns the new state here. Native-
-    // driven commits (typing, native toolbar) already updated the view
-    // through the adapter and are never echoed back. The first observed
-    // revision is skipped: the view pulls the initial state natively on bind.
+    // Native commits already update the view; echo only subsequent JS-driven revisions.
     useEffect(() => {
         // The document hook refreshes its state after the rebind commit. Its
         // first render can therefore still contain A's revision; do not let
@@ -347,13 +485,20 @@ export function useRichTextEditorUpdates(
         if (didRebindRevisionScope) {
             return;
         }
-        if (!document.isReady || document.documentRevision == null) return;
+
+        if (!document.isReady || document.documentRevision == null) {
+            return;
+        }
+
         const revision = document.documentRevision;
+
         if (!pendingViewReset && !didObserveInitialRevisionRef.current) {
             didObserveInitialRevisionRef.current = true;
             lastPushedEngineRevisionRef.current = revision;
+
             return;
         }
+
         if (
             !pendingViewReset &&
             lastPushedEngineRevisionRef.current != null &&
@@ -361,6 +506,7 @@ export function useRichTextEditorUpdates(
         ) {
             return;
         }
+
         if (
             !pendingViewReset &&
             (revision === lastNativeDrivenRevisionRef.current ||
@@ -370,13 +516,15 @@ export function useRichTextEditorUpdates(
             if (document.documentOrigin === 'remoteCollaboration' && !documentHandle.isDestroyed) {
                 refreshAtomsFromUpdate(bridge.renderUpdate());
             }
+
             lastPushedEngineRevisionRef.current = revision;
+
             return;
         }
+
         lastNativeDrivenRevisionRef.current = null;
         pushEngineUpdateToView();
-    }, [
-        pendingViewReset,
+    }, [ pendingViewReset,
         didRebindRevisionScope,
         document.isReady,
         document.documentRevision,
@@ -385,13 +533,16 @@ export function useRichTextEditorUpdates(
         documentHandle,
         pushEngineUpdateToView,
         refreshAtomsFromUpdate,
-    ]);
+        didObserveInitialRevisionRef,
+        lastPushedEngineRevisionRef,
+        lastNativeDrivenRevisionRef ]);
 
     const afterLocalEngineMutation = useCallback(() => {
         onLocalCommitRef.current?.();
         pushEngineUpdateToView();
         document.refresh();
-    }, [document, pushEngineUpdateToView]);
+    }, [ document, onLocalCommitRef, pushEngineUpdateToView ]);
+
     return {
         refreshAtomsFromUpdate,
         afterLocalEngineMutation,