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

package/dist/useRichTextEditorPresentation.d.ts

@@ -1,5 +1,5 @@
-import { useRichTextEditorState } from './useRichTextEditorState';
-import { useRichTextEditorMentions } from './useRichTextEditorMentions';
-import { useRichTextEditorCommands } from './useRichTextEditorCommands';
-import { useRichTextEditorEvents } from './useRichTextEditorEvents';
+import { type useRichTextEditorState } from './useRichTextEditorState';
+import { type useRichTextEditorMentions } from './useRichTextEditorMentions';
+import { type useRichTextEditorCommands } from './useRichTextEditorCommands';
+import { type useRichTextEditorEvents } from './useRichTextEditorEvents';
 export declare function useRichTextEditorPresentation(context: Pick<ReturnType<typeof useRichTextEditorState>, 'theme' | 'addons' | 'imageLoadingPolicy' | 'androidInputOptions' | 'remoteSelections' | 'atoms' | 'atomState' | 'atomComponents' | 'warnedUnknownAtomTypesRef' | 'atomContentWidth' | 'atomPositions' | 'atomViewport' | 'virtualizeAtoms' | 'nativeAtomViewport' | 'selectedKeys' | 'editable' | 'atomsInteractive' | 'documentHandle' | 'activeState' | 'onRequestLink' | 'onRequestImage' | 'toolbarItemsSerializationCacheRef' | 'toolbarItems' | 'document' | 'toolbarPlacement' | 'showToolbar' | 'containerStyle' | 'style' | 'heightBehavior' | 'autoGrowHeight' | 'pushedUpdate' | 'editorId' | 'registeredToolbarFrames' | 'suppliedFocusPreservingFrames' | 'isFocused' | 'nativeViewRef' | 'refreshFocusPreservingFrames' | 'accessibilityLabel' | 'accessibilityHint' | 'placeholder' | 'autoFocus' | 'autoCapitalize' | 'autoCorrect' | 'keyboardType' | 'allowImageResizing' | 'toolbarFrameOwnerId' | 'onToolbarAction'> & Pick<ReturnType<typeof useRichTextEditorMentions>, 'mentionSuggestionTheme' | 'handleAddonEvent'> & Pick<ReturnType<typeof useRichTextEditorCommands>, 'runAtomAction' | 'updateAtomAttrs' | 'atomOwnerRef' | 'commandToggleMark' | 'commandToggleList' | 'commandToggleHeading' | 'commandToggleBlockquote' | 'commandInsertNode' | 'commandIndentListItem' | 'commandOutdentListItem' | 'openLinkRequest' | 'openImageRequest'> & Pick<ReturnType<typeof useRichTextEditorEvents>, 'handleEditorUpdate' | 'handleEditorError' | 'handleExternalTextCompositionEnd' | 'handleSelectionChange' | 'handleFocusChange' | 'handleContentHeightChange' | 'handleAtomLayout' | 'handleToolbarAction'>): import("react/jsx-runtime").JSX.Element | null;

package/dist/useRichTextEditorPresentation.js

@@ -19,10 +19,10 @@ const RichTextEditorNativeView_1 = require("./RichTextEditorNativeView");
 function useRichTextEditorPresentation(context) {
     const { theme, mentionSuggestionTheme, addons, imageLoadingPolicy, androidInputOptions, remoteSelections, atoms, atomState, atomComponents, warnedUnknownAtomTypesRef, runAtomAction, updateAtomAttrs, atomOwnerRef, atomContentWidth, atomPositions, atomViewport, virtualizeAtoms, nativeAtomViewport, selectedKeys, editable, atomsInteractive, documentHandle, activeState, onRequestLink, onRequestImage, toolbarItemsSerializationCacheRef, toolbarItems, document, toolbarPlacement, showToolbar, containerStyle, style, heightBehavior, autoGrowHeight, pushedUpdate, editorId, registeredToolbarFrames, suppliedFocusPreservingFrames, isFocused, nativeViewRef, refreshFocusPreservingFrames, accessibilityLabel, accessibilityHint, placeholder, autoFocus, autoCapitalize, autoCorrect, keyboardType, allowImageResizing, handleEditorUpdate, handleEditorError, handleExternalTextCompositionEnd, handleSelectionChange, handleFocusChange, handleContentHeightChange, handleAtomLayout, handleToolbarAction, handleAddonEvent, toolbarFrameOwnerId, commandToggleMark, commandToggleList, commandToggleHeading, commandToggleBlockquote, commandInsertNode, commandIndentListItem, commandOutdentListItem, openLinkRequest, openImageRequest, onToolbarAction, } = context;
     const themeJson = (0, react_1.useMemo)(() => (0, EditorTheme_1.serializeEditorTheme)(theme, mentionSuggestionTheme), [mentionSuggestionTheme, theme]);
-    const addonsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(addons, (value) => (0, addons_1.serializeNormalizedEditorAddons)(value));
-    const imageLoadingPolicyJson = (0, RichTextEditorSerialization_1.useSerializedValue)(imageLoadingPolicy, (value) => (0, ImageLoadingPolicy_1.serializeEditorImageLoadingPolicy)(value));
-    const androidInputOptionsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(androidInputOptions, (value) => JSON.stringify(value));
-    const remoteSelectionsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(remoteSelections, (selections) => (0, RichTextEditorSerialization_1.serializeRemoteSelections)(selections));
+    const addonsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(addons, value => (0, addons_1.serializeNormalizedEditorAddons)(value));
+    const imageLoadingPolicyJson = (0, RichTextEditorSerialization_1.useSerializedValue)(imageLoadingPolicy, value => (0, ImageLoadingPolicy_1.serializeEditorImageLoadingPolicy)(value));
+    const androidInputOptionsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(androidInputOptions, value => JSON.stringify(value));
+    const remoteSelectionsJson = (0, RichTextEditorSerialization_1.useSerializedValue)(remoteSelections, selections => (0, RichTextEditorSerialization_1.serializeRemoteSelections)(selections));
     const atomsJson = (0, react_1.useMemo)(() => {
         const supplied = (0, atoms_1.serializeEditorAtoms)(atoms);
         const serialized = supplied == null
@@ -38,8 +38,9 @@ function useRichTextEditorPresentation(context) {
         return serialized.nodeTypes.length === 0 ? undefined : JSON.stringify(serialized);
     }, [atomState.instances, atoms]);
     (0, react_1.useEffect)(() => {
-        if (!__DEV__)
+        if (!__DEV__) {
             return;
+        }
         for (const instance of atomState.instances) {
             if (atomComponents.has(instance.nodeType) ||
                 warnedUnknownAtomTypesRef.current.has(instance.nodeType)) {
@@ -48,20 +49,21 @@ function useRichTextEditorPresentation(context) {
             warnedUnknownAtomTypesRef.current.add(instance.nodeType);
             console.warn(`NativeRichTextEditor: rendering unknown atom type '${instance.nodeType}' as a chip`);
         }
-    }, [atomComponents, atomState.instances]);
+    }, [atomComponents, atomState.instances, warnedUnknownAtomTypesRef]);
     const runAtomActionRef = (0, react_1.useRef)(runAtomAction);
     runAtomActionRef.current = runAtomAction;
     const invokeAtomAction = (0, react_1.useCallback)((...args) => runAtomActionRef.current(...args), []);
     const updateAtomAttrsRef = (0, react_1.useRef)(updateAtomAttrs);
     updateAtomAttrsRef.current = updateAtomAttrs;
     const invokeAtomAttrsUpdate = (0, react_1.useCallback)((owner, instance, documentVersion, attrs) => {
-        if (owner !== atomOwnerRef.current)
+        if (owner !== atomOwnerRef.current) {
             return Promise.reject(new atomInstances_1.AtomUpdateAttrsError('not-ready', 'The editor has rebound.'));
+        }
         return updateAtomAttrsRef.current(instance.key, instance.nodeType, instance.docPos, documentVersion, instance.hasStableKey, attrs);
-    }, []);
+    }, [atomOwnerRef]);
     const atomChildren = (0, react_1.useMemo)(() => atomContentWidth == null
         ? null
-        : atomState.instances.map((instance) => {
+        : atomState.instances.map(instance => {
             const Component = atomComponents.get(instance.nodeType) ?? DefaultAtomChip_1.DefaultAtomChip;
             const position = atomPositions.get(instance.key);
             const width = position?.width ?? atomContentWidth;
@@ -70,10 +72,10 @@ function useRichTextEditorPresentation(context) {
                     top: react_native_1.Platform.OS === 'android' ? (position?.hostY ?? 0) : 0,
                     left: react_native_1.Platform.OS === 'android' ? (position?.hostX ?? 0) : 0,
                     width,
-                }, children: (0, jsx_runtime_1.jsx)(AtomHost_1.AtomHost, { nativeID: `${atomConstants_1.ATOM_CONTENT_NATIVE_ID_PREFIX}${instance.key}`, component: Component, width: width, estimatedHeight: (atoms ?? []).find((atom) => atom.name === instance.nodeType)
+                }, children: (0, jsx_runtime_1.jsx)(AtomHost_1.AtomHost, { nativeID: `${atomConstants_1.ATOM_CONTENT_NATIVE_ID_PREFIX}${instance.key}`, component: Component, width: width, estimatedHeight: (atoms ?? []).find(atom => atom.name === instance.nodeType)
                         ?.estimatedHeight ?? atomInstances_1.DEFAULT_ATOM_CHIP_HEIGHT, visible: !position ||
                         (0, AtomHost_1.atomIsVisible)(position.y, position.height ??
-                            (atoms ?? []).find((atom) => atom.name === instance.nodeType)?.estimatedHeight ??
+                            (atoms ?? []).find(atom => atom.name === instance.nodeType)?.estimatedHeight ??
                             atomInstances_1.DEFAULT_ATOM_CHIP_HEIGHT, atomViewport ??
                             (virtualizeAtoms ? nativeAtomViewport : undefined)), atomProps: {
                         attrs: instance.attrs,
@@ -82,7 +84,7 @@ function useRichTextEditorPresentation(context) {
                         interactive: atomsInteractive,
                         isViewer: false,
                         nodeType: instance.nodeType,
-                        updateAttrs: (attrs) => invokeAtomAttrsUpdate(documentHandle, instance, atomState.documentVersion, attrs),
+                        updateAttrs: attrs => invokeAtomAttrsUpdate(documentHandle, instance, atomState.documentVersion, attrs),
                         editor: {
                             select: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'select'),
                             delete: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'delete'),
@@ -90,22 +92,21 @@ function useRichTextEditorPresentation(context) {
                             focusAfter: () => invokeAtomAction(documentHandle, instance, atomState.documentVersion, 'after'),
                         },
                     } }) }, instance.key));
-        }), [
+        }), [atomContentWidth,
+        atomState.instances,
+        atomState.documentVersion,
+        atomComponents,
+        atomPositions,
         atoms,
         atomViewport,
-        documentHandle,
-        invokeAtomAction,
         virtualizeAtoms,
         nativeAtomViewport,
-        atomsInteractive,
-        atomComponents,
-        atomContentWidth,
-        atomPositions,
-        atomState.instances,
+        selectedKeys,
         editable,
+        atomsInteractive,
         invokeAtomAttrsUpdate,
-        selectedKeys,
-    ]);
+        documentHandle,
+        invokeAtomAction]);
     const isLinkActive = activeState.marks.link === true;
     const allowsLink = activeState.allowedMarks.includes('link');
     const canInsertImage = activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME);
@@ -139,8 +140,9 @@ function useRichTextEditorPresentation(context) {
     }
     // A room document awaiting the server renders nothing (loading), never an
     // unshared fallback paragraph.
-    if (!document.isReady)
+    if (!document.isReady) {
         return null;
+    }
     const usesNativeKeyboardToolbar = toolbarPlacement === 'keyboard' && (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android');
     const shouldRenderJsToolbar = showToolbar && !usesNativeKeyboardToolbar && editable;
     const inlineToolbarMarginTop = theme?.toolbar?.marginTop ?? 8;

package/dist/useRichTextEditorState.d.ts

@@ -1,5 +1,5 @@
 import { type EditorToolbarItem } from './EditorToolbar';
-import React from 'react';
+import type React from 'react';
 import { type ReadonlyActiveState, type Selection } from './NativeEditorBridge';
 import { type AtomComponent } from './atoms';
 import { ExternalTextCompositionManager } from './ExternalTextComposition';
@@ -156,8 +156,8 @@ export declare function useRichTextEditorState({ documentHandle, documentRevisio
     toolbarItems: readonly EditorToolbarItem[];
     toolbarPlacement: import("./RichTextEditorTypes").RichTextEditorToolbarPlacement;
     showToolbar: boolean;
-    containerStyle: RichTextEditorProps["containerStyle"];
-    style: RichTextEditorProps["style"];
+    containerStyle: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    style: import("react-native").StyleProp<import("react-native").ViewStyle>;
     autoGrowHeight: number | null;
     pushedUpdate: {
         json: string;

package/dist/useRichTextEditorState.js

@@ -14,17 +14,18 @@ function useRichTextEditorState({ documentHandle, documentRevision, value, value
     const addons = (0, react_1.useMemo)(() => (0, addons_1.normalizeEditorAddons)(addonDescriptors), [addonDescriptors]);
     (0, NativeEditorBridge_1._assertNativeEditorDocumentHandle)(documentHandle);
     const documentDescriptor = (0, NativeEditorBridge_1._getNativeEditorDocumentHandleDescriptor)(documentHandle);
-    const registeredAtomTypeKey = JSON.stringify((atoms ?? []).map((atom) => atom.name));
-    const registeredAtomTypes = (0, react_1.useMemo)(() => new Set((atoms ?? []).map((atom) => atom.name)), [registeredAtomTypeKey]);
+    const registeredAtomTypeKey = JSON.stringify((atoms ?? []).map(atom => atom.name));
+    const registeredAtomTypes = (0, react_1.useMemo)(() => new Set(JSON.parse(registeredAtomTypeKey)), [registeredAtomTypeKey]);
     const atomComponents = (0, react_1.useMemo)(() => {
         const components = new Map();
         for (const atom of atoms ?? []) {
-            if (!components.has(atom.name))
+            if (!components.has(atom.name)) {
                 components.set(atom.name, atom.component);
+            }
         }
         return components;
     }, [atoms]);
-    const serializedValueJson = (0, RichTextEditorSerialization_1.useSerializedValue)(valueJSON, (doc) => (0, RichTextEditorSerialization_1.stringifyCachedJson)((0, schemas_1.normalizeDocumentJson)(doc, documentDescriptor)), valueJSONRevision);
+    const serializedValueJson = (0, RichTextEditorSerialization_1.useSerializedValue)(valueJSON, doc => (0, RichTextEditorSerialization_1.stringifyCachedJson)((0, schemas_1.normalizeDocumentJson)(doc, documentDescriptor)), valueJSONRevision);
     const controlledValueJSON = (0, react_1.useMemo)(() => serializedValueJson == null
         ? undefined
         : JSON.parse(serializedValueJson), [serializedValueJson]);
@@ -34,20 +35,21 @@ function useRichTextEditorState({ documentHandle, documentRevision, value, value
     const externalCompositionManager = (0, react_1.useMemo)(() => new ExternalTextComposition_1.ExternalTextCompositionManager(editorId, () => nativeViewRef.current), [editorId]);
     const managerDisposalsRef = (0, react_1.useRef)(new Map());
     (0, react_1.useEffect)(() => {
-        const pendingDisposal = managerDisposalsRef.current.get(externalCompositionManager);
+        const managerDisposals = managerDisposalsRef.current;
+        const pendingDisposal = managerDisposals.get(externalCompositionManager);
         if (pendingDisposal != null) {
             pendingDisposal.cancelled = true;
-            managerDisposalsRef.current.delete(externalCompositionManager);
+            managerDisposals.delete(externalCompositionManager);
         }
         return () => {
             const token = { cancelled: false };
-            managerDisposalsRef.current.set(externalCompositionManager, token);
+            managerDisposals.set(externalCompositionManager, token);
             void Promise.resolve().then(() => {
                 if (token.cancelled ||
-                    managerDisposalsRef.current.get(externalCompositionManager) !== token) {
+                    managerDisposals.get(externalCompositionManager) !== token) {
                     return;
                 }
-                managerDisposalsRef.current.delete(externalCompositionManager);
+                managerDisposals.delete(externalCompositionManager);
                 externalCompositionManager.dispose();
             });
         };
@@ -96,8 +98,9 @@ function useRichTextEditorState({ documentHandle, documentRevision, value, value
         const pending = { manager: externalCompositionManager };
         pendingResetCancellationRef.current = pending;
         void externalCompositionManager.cancelForDocumentChange().then(() => {
-            if (pendingResetCancellationRef.current !== pending)
+            if (pendingResetCancellationRef.current !== pending) {
                 return;
+            }
             pendingResetCancellationRef.current = null;
             const latest = latestControlledValueRef.current;
             if (latest.manager !== externalCompositionManager ||
@@ -115,10 +118,11 @@ function useRichTextEditorState({ documentHandle, documentRevision, value, value
                 value: latest.value,
                 valueJSON: latest.valueJSON,
             };
-            setControlledResetRevision((revision) => revision + 1);
+            setControlledResetRevision(revision => revision + 1);
         }, (error) => {
-            if (pendingResetCancellationRef.current !== pending)
+            if (pendingResetCancellationRef.current !== pending) {
                 return;
+            }
             pendingResetCancellationRef.current = null;
             const latest = latestControlledValueRef.current;
             if (latest.manager !== externalCompositionManager ||
@@ -173,8 +177,9 @@ function useRichTextEditorState({ documentHandle, documentRevision, value, value
             nativeErrorBindingRef.current = nativeErrorBinding;
         }
         return () => {
-            if (nativeErrorBindingRef.current !== nativeErrorBinding)
+            if (nativeErrorBindingRef.current !== nativeErrorBinding) {
                 return;
+            }
             nativeErrorBindingRef.current = {
                 ...nativeErrorBinding,
                 generation: nativeErrorBinding.generation + 1,
@@ -385,8 +390,8 @@ function useRichTextEditorState({ documentHandle, documentRevision, value, value
         toolbarItems,
         toolbarPlacement,
         showToolbar,
-        containerStyle: containerStyle,
-        style: style,
+        containerStyle,
+        style,
         autoGrowHeight,
         pushedUpdate,
         registeredToolbarFrames,

package/dist/useRichTextEditorUpdates.d.ts

@@ -1,5 +1,5 @@
 import { type NativeEditorAtomicRenderSnapshot, type Selection } from './NativeEditorBridge';
-import { useRichTextEditorState } from './useRichTextEditorState';
+import { type useRichTextEditorState } from './useRichTextEditorState';
 export declare function useRichTextEditorUpdates(context: Pick<ReturnType<typeof useRichTextEditorState>, 'atomStateRef' | 'setSelectedKeys' | 'bridge' | 'registeredAtomTypes' | 'setAtomState' | 'selectionRef' | 'document' | 'documentHandle' | 'atomSeedEditorIdRef' | 'editorId' | 'scalarSelectionRef' | 'activeStateRef' | 'setActiveState' | 'activeStateKeyRef' | 'onActiveStateChangeRef' | 'pushedUpdateBindingGenerationRef' | 'currentPushedUpdateEditorIdRef' | 'pushRevisionRef' | 'lastPushedEngineRevisionRef' | 'setPushedUpdate' | 'pendingFocusedRebindRef' | 'toolbarFrameOwnerId' | 'onFocusRef' | 'didRebindRevisionScope' | 'didObserveInitialRevisionRef' | 'lastNativeDrivenRevisionRef' | 'onLocalCommitRef'>): {
     refreshAtomsFromUpdate: (update: NativeEditorAtomicRenderSnapshot) => void;
     afterLocalEngineMutation: () => void;

package/dist/useRichTextEditorUpdates.js

@@ -10,8 +10,8 @@ function useRichTextEditorUpdates(context) {
     const { atomStateRef, setSelectedKeys, bridge, registeredAtomTypes, setAtomState, selectionRef, document, documentHandle, atomSeedEditorIdRef, editorId, scalarSelectionRef, activeStateRef, setActiveState, activeStateKeyRef, onActiveStateChangeRef, pushedUpdateBindingGenerationRef, currentPushedUpdateEditorIdRef, pushRevisionRef, lastPushedEngineRevisionRef, setPushedUpdate, pendingFocusedRebindRef, toolbarFrameOwnerId, onFocusRef, didRebindRevisionScope, didObserveInitialRevisionRef, lastNativeDrivenRevisionRef, onLocalCommitRef, } = context;
     const updateAtomSelection = (0, react_1.useCallback)((selection, instances = atomStateRef.current.instances) => {
         const next = (0, RichTextEditorSerialization_1.selectedAtomKeys)(selection, instances);
-        setSelectedKeys((current) => ((0, RichTextEditorSerialization_1.equalStringSets)(current, next) ? current : next));
-    }, []);
+        setSelectedKeys(current => ((0, RichTextEditorSerialization_1.equalStringSets)(current, next) ? current : next));
+    }, [atomStateRef, setSelectedKeys]);
     const refreshAtomsFromUpdate = (0, react_1.useCallback)((update) => {
         const previous = atomStateRef.current;
         const source = update.renderPatch != null &&
@@ -55,7 +55,12 @@ function useRichTextEditorUpdates(context) {
             setAtomState(next);
         }
         updateAtomSelection(selectionRef.current, next.instances);
-    }, [bridge, registeredAtomTypes, updateAtomSelection]);
+    }, [atomStateRef,
+        bridge,
+        registeredAtomTypes,
+        selectionRef,
+        setAtomState,
+        updateAtomSelection]);
     (0, react_1.useEffect)(() => {
         const current = atomStateRef.current;
         const collection = (0, atomInstances_1.collectAtomInstanceBlocks)(current.blocks, registeredAtomTypes);
@@ -72,7 +77,11 @@ function useRichTextEditorUpdates(context) {
             setAtomState(next);
         }
         updateAtomSelection(selectionRef.current, instances);
-    }, [registeredAtomTypes, updateAtomSelection]);
+    }, [atomStateRef,
+        registeredAtomTypes,
+        selectionRef,
+        setAtomState,
+        updateAtomSelection]);
     (0, react_1.useLayoutEffect)(() => {
         if (!document.isReady ||
             documentHandle.isDestroyed ||
@@ -81,10 +90,16 @@ function useRichTextEditorUpdates(context) {
         }
         atomSeedEditorIdRef.current = editorId;
         refreshAtomsFromUpdate(bridge.renderUpdate());
-    }, [bridge, document.isReady, documentHandle, editorId, refreshAtomsFromUpdate]);
+    }, [atomSeedEditorIdRef,
+        bridge,
+        document.isReady,
+        documentHandle,
+        editorId,
+        refreshAtomsFromUpdate]);
     const applyTypedUpdateState = (0, react_1.useCallback)((update, isCurrent = () => true) => {
-        if (!isCurrent())
+        if (!isCurrent()) {
             return false;
+        }
         selectionRef.current = update.selection;
         updateAtomSelection(update.selection);
         if (update.selection.type === 'text' &&
@@ -95,34 +110,47 @@ function useRichTextEditorUpdates(context) {
                 head: update.selection.headScalar,
             };
         }
-        if (!isCurrent())
+        if (!isCurrent()) {
             return false;
+        }
         const nextActiveState = update.activeState;
         activeStateRef.current = nextActiveState;
-        if (!isCurrent())
+        if (!isCurrent()) {
             return false;
+        }
         setActiveState(nextActiveState);
-        if (!isCurrent())
+        if (!isCurrent()) {
             return false;
+        }
         const key = (0, RichTextEditorSerialization_1.stringifyCachedJson)(nextActiveState);
         if (key !== activeStateKeyRef.current) {
-            if (!isCurrent())
+            if (!isCurrent()) {
                 return false;
+            }
             activeStateKeyRef.current = key;
-            if (!isCurrent())
+            if (!isCurrent()) {
                 return false;
+            }
             onActiveStateChangeRef.current?.(nextActiveState);
         }
         return isCurrent();
-    }, [updateAtomSelection]);
+    }, [activeStateKeyRef,
+        activeStateRef,
+        onActiveStateChangeRef,
+        scalarSelectionRef,
+        selectionRef,
+        setActiveState,
+        updateAtomSelection]);
     const applyUpdateState = (0, react_1.useCallback)((updateJson) => {
-        if (typeof updateJson !== 'string' || updateJson.length === 0)
+        if (typeof updateJson !== 'string' || updateJson.length === 0) {
             return null;
+        }
         let parsed;
         try {
             const candidate = JSON.parse(updateJson);
-            if (!(0, RichTextEditorSerialization_1.isRecord)(candidate))
+            if (!(0, RichTextEditorSerialization_1.isRecord)(candidate)) {
                 return null;
+            }
             parsed = candidate;
         }
         catch {
@@ -149,10 +177,16 @@ function useRichTextEditorUpdates(context) {
             }
         }
         return parsed;
-    }, [applyTypedUpdateState]);
+    }, [activeStateKeyRef,
+        activeStateRef,
+        applyTypedUpdateState,
+        onActiveStateChangeRef,
+        selectionRef,
+        setActiveState]);
     const pushEngineUpdateToView = (0, react_1.useCallback)(() => {
-        if (documentHandle.isDestroyed)
+        if (documentHandle.isDestroyed) {
             return;
+        }
         const sourceEditorId = documentHandle.editorId;
         const sourceBindingGeneration = pushedUpdateBindingGenerationRef.current;
         const isCurrentSource = () => {
@@ -170,38 +204,55 @@ function useRichTextEditorUpdates(context) {
         // 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())
+        if (!isCurrentSource()) {
             return;
+        }
         refreshAtomsFromUpdate(snapshot);
-        if (!isCurrentSource())
+        if (!isCurrentSource()) {
             return;
+        }
         const updateJson = JSON.stringify(snapshot);
-        if (!isCurrentSource())
+        if (!isCurrentSource()) {
             return;
+        }
         if (!applyTypedUpdateState(snapshot, isCurrentSource)) {
             return;
         }
-        if (!isCurrentSource())
+        if (!isCurrentSource()) {
             return;
+        }
         lastPushedEngineRevisionRef.current = snapshot.documentVersion;
-        if (!isCurrentSource())
+        if (!isCurrentSource()) {
             return;
+        }
         pushRevisionRef.current = allocation.revision;
-        if (!isCurrentSource())
+        if (!isCurrentSource()) {
             return;
+        }
         setPushedUpdate({
             json: updateJson,
             resetJson: reset?.json,
             revision: allocation.revision,
             editorId: sourceEditorId,
         });
-        if (bridge._pendingViewReset === reset)
+        if (bridge._pendingViewReset === reset) {
             bridge._pendingViewReset = null;
-    }, [applyTypedUpdateState, bridge, documentHandle, refreshAtomsFromUpdate]);
+        }
+    }, [applyTypedUpdateState,
+        bridge,
+        currentPushedUpdateEditorIdRef,
+        documentHandle.editorId,
+        documentHandle.isDestroyed,
+        lastPushedEngineRevisionRef,
+        pushRevisionRef,
+        pushedUpdateBindingGenerationRef,
+        refreshAtomsFromUpdate,
+        setPushedUpdate]);
     (0, react_1.useLayoutEffect)(() => {
         const pending = pendingFocusedRebindRef.current;
-        if (pending?.editorId !== editorId || !document.isReady)
+        if (pending?.editorId !== editorId || !document.isReady) {
             return;
+        }
         pendingFocusedRebindRef.current = null;
         const snapshot = bridge.renderUpdate();
         const anchor = Math.min(pending.anchor, snapshot.scalarLength);
@@ -220,35 +271,40 @@ function useRichTextEditorUpdates(context) {
                 setSelection(collapsed ? 'after' : 'before');
             }
             catch (error) {
-                if (!collapsed || !(0, RichTextEditorSerialization_1.isPositionInvalidError)(error))
+                if (!collapsed || !(0, RichTextEditorSerialization_1.isPositionInvalidError)(error)) {
                     throw error;
+                }
                 setSelection('before');
             }
             pushEngineUpdateToView();
         }
         catch (error) {
-            if (!(0, RichTextEditorSerialization_1.isPositionInvalidError)(error))
+            if (!(0, RichTextEditorSerialization_1.isPositionInvalidError)(error)) {
                 throw error;
+            }
         }
         (0, EditorToolbar_1.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.
     (0, react_1.useEffect)(() => {
-        setPushedUpdate((current) => {
-            if (current == null || current.editorId === editorId)
+        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.
     (0, react_1.useEffect)(() => {
         // The document hook refreshes its state after the rebind commit. Its
         // first render can therefore still contain A's revision; do not let
@@ -256,8 +312,9 @@ function useRichTextEditorUpdates(context) {
         if (didRebindRevisionScope) {
             return;
         }
-        if (!document.isReady || document.documentRevision == null)
+        if (!document.isReady || document.documentRevision == null) {
             return;
+        }
         const revision = document.documentRevision;
         if (!pendingViewReset && !didObserveInitialRevisionRef.current) {
             didObserveInitialRevisionRef.current = true;
@@ -281,8 +338,7 @@ function useRichTextEditorUpdates(context) {
         }
         lastNativeDrivenRevisionRef.current = null;
         pushEngineUpdateToView();
-    }, [
-        pendingViewReset,
+    }, [pendingViewReset,
         didRebindRevisionScope,
         document.isReady,
         document.documentRevision,
@@ -291,12 +347,14 @@ function useRichTextEditorUpdates(context) {
         documentHandle,
         pushEngineUpdateToView,
         refreshAtomsFromUpdate,
-    ]);
+        didObserveInitialRevisionRef,
+        lastPushedEngineRevisionRef,
+        lastNativeDrivenRevisionRef]);
     const afterLocalEngineMutation = (0, react_1.useCallback)(() => {
         onLocalCommitRef.current?.();
         pushEngineUpdateToView();
         document.refresh();
-    }, [document, pushEngineUpdateToView]);
+    }, [document, onLocalCommitRef, pushEngineUpdateToView]);
     return {
         refreshAtomsFromUpdate,
         afterLocalEngineMutation,