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

package/src/useViewerAtoms.tsx

@@ -56,9 +56,14 @@ function parsePositions(
     snapshot: string
 ): AtomPosition[] {
     const values: unknown = JSON.parse(json);
-    if (!Array.isArray(values)) throw new Error('Atom positions must be an array.');
+
+    if (!Array.isArray(values)) {
+        throw new Error('Atom positions must be an array.');
+    }
+
     const seen = new Set<number>();
     const identities = new Set<string>();
+
     return values.map((value: unknown) => {
         if (
             !isRecord(value) ||
@@ -68,8 +73,8 @@ function parsePositions(
             Number(value.docPos) < 0 ||
             Number(value.docPos) > 0xffffffff ||
             typeof value.attrsJson !== 'string' ||
-            !['x', 'y', 'width', 'height'].every(
-                (key) => typeof value[key] === 'number' && Number.isFinite(value[key])
+            ![ 'x', 'y', 'width', 'height' ].every(
+                key => typeof value[key] === 'number' && Number.isFinite(value[key])
             ) ||
             Number(value.width) <= 0 ||
             Number(value.height) < 0 ||
@@ -77,20 +82,33 @@ function parsePositions(
         ) {
             throw new Error('Invalid prepared atom position.');
         }
+
         const attrs: unknown = JSON.parse(value.attrsJson);
-        if (!isRecord(attrs)) throw new Error('Atom attributes must be a JSON object.');
+
+        if (!isRecord(attrs)) {
+            throw new Error('Atom attributes must be a JSON object.');
+        }
+
         const idAttribute = definitions.get(value.nodeType)?.idAttribute;
         const atomId = idAttribute == null ? undefined : attrs[idAttribute];
-        if (idAttribute != null && (typeof atomId !== 'string' || atomId.length === 0))
+
+        if (idAttribute != null && (typeof atomId !== 'string' || atomId.length === 0)) {
             throw new Error('Atom identity must be a non-empty string.');
+        }
+
         const key =
             typeof atomId === 'string'
-                ? JSON.stringify([value.nodeType, atomId])
-                : `${snapshot}:${value.docPos}:${value.nodeType}`;
-        if (identities.has(key)) throw new Error('Duplicate atom identity.');
+                ? JSON.stringify([ value.nodeType, atomId ])
+                : `${snapshot}:${String(value.docPos)}:${value.nodeType}`;
+
+        if (identities.has(key)) {
+            throw new Error('Duplicate atom identity.');
+        }
+
         identities.add(key);
         seen.add(Number(value.docPos));
-        return { ...value, attrs, key, atomId } as unknown as AtomPosition;
+
+        return { ...value, attrs, key, atomId } as AtomPosition;
     });
 }
 
@@ -113,49 +131,69 @@ export function useViewerAtoms({
     onUpdateAtomAttrs?: UpdateHandler;
     onError?: (event: RichTextViewerErrorEvent) => void;
 }) {
-    const [width, setWidth] = useState<number | null>(null);
-    const snapshot = useMemo(() => String(++nextGeneration), [identity]);
+    const [ width, setWidth ] = useState<number | null>(null);
+    const snapshot = useMemo(() => ({ identity, value: String(++nextGeneration) }), [ identity ]).value;
     const serializedAtoms = serializeEditorAtoms(atoms);
-    const identifiers = JSON.stringify((atoms ?? []).map((atom) => [atom.name, atom.idAttribute]));
+    const identifiers = JSON.stringify((atoms ?? []).map(atom => [ atom.name, atom.idAttribute ]));
+
     const generation = useMemo(
-        () => String(++nextGeneration),
-        [identity, identifiers, serializedAtoms, width]
-    );
+        () => ({
+            identity, identifiers, serializedAtoms, width, value: String(++nextGeneration),
+        }),
+        [ identity, identifiers, serializedAtoms, width ]
+    ).value;
+
     const definitions = useMemo(
-        () => new Map((atoms ?? []).map((atom) => [atom.name, atom])),
-        [atoms]
+        () => new Map((atoms ?? []).map(atom => [ atom.name, atom ])),
+        [ atoms ]
     );
+
     const enabled = definitions.size > 0;
-    const [measurementState, setMeasurementState] = useState({
+
+    const [ measurementState, setMeasurementState ] = useState<{ generation: string; revision: number; values: Record<string, Measurement> }>({
         generation,
         revision: 0,
-        values: {} as Measurements,
+        values: {},
     });
-    const measurements = measurementState.generation === generation ? measurementState.values : {};
+
+    const measurements = useMemo(
+        () => measurementState.generation === generation ? measurementState.values : {},
+        [ measurementState, generation ]
+    );
+
     const revision = String(
         measurementState.generation === generation ? measurementState.revision : 0
     );
-    const [layout, setLayout] = useState<{
+
+    const [ layout, setLayout ] = useState<{
         generation: string;
         json: string;
         positions: AtomPosition[];
     } | null>(null);
+
     const pendingLayout = layout?.generation !== generation;
     const renderedPositions = layout?.positions ?? [];
     const positions = pendingLayout ? [] : renderedPositions;
     const mountedMeasurements = useRef(new Map<string, { nodeType: string; size: Measurement }>());
+
     useLayoutEffect(() => {
-        for (const [key, measured] of mountedMeasurements.current) {
-            if (!definitions.has(measured.nodeType)) mountedMeasurements.current.delete(key);
+        for (const [ key, measured ] of mountedMeasurements.current) {
+            if (!definitions.has(measured.nodeType)) {
+                mountedMeasurements.current.delete(key);
+            }
         }
-    }, [definitions]);
+    }, [ definitions ]);
+
     const mounted = useRef(false);
+
     useLayoutEffect(() => {
         mounted.current = true;
+
         return () => {
             mounted.current = false;
         };
     }, []);
+
     const current = useRef({
         generation,
         snapshot,
@@ -169,6 +207,7 @@ export function useViewerAtoms({
         onError,
         width,
     });
+
     current.current = {
         generation,
         snapshot,
@@ -187,21 +226,27 @@ export function useViewerAtoms({
         () =>
             enabled
                 ? JSON.stringify({
-                      ...(themeJson ? JSON.parse(themeJson) : {}),
-                      viewerAtoms: {
-                          ...JSON.parse(serializedAtoms!),
-                          generation,
-                          revision,
-                          measurements,
-                      },
-                  })
+                    ...(themeJson ? JSON.parse(themeJson) : {}),
+                    viewerAtoms: {
+                        ...JSON.parse(serializedAtoms!),
+                        generation,
+                        revision,
+                        measurements,
+                    },
+                })
                 : themeJson,
-        [enabled, themeJson, serializedAtoms, generation, revision, measurements]
+        [ enabled,
+            themeJson,
+            serializedAtoms,
+            generation,
+            revision,
+            measurements ]
     );
 
     const onAtomLayout = useCallback((event: NativeSyntheticEvent<ViewerAtomLayoutEvent>) => {
         const value = event.nativeEvent;
         const latest = current.current;
+
         if (
             !mounted.current ||
             value.generation !== latest.generation ||
@@ -209,41 +254,49 @@ export function useViewerAtoms({
             !Number.isFinite(value.layoutWidth) ||
             value.layoutWidth <= 0 ||
             (latest.width != null && Math.abs(latest.width - value.layoutWidth) > 1)
-        )
+        ) {
             return;
+        }
+
         try {
             const next = parsePositions(value.atomsJson, latest.definitions, latest.snapshot);
             const retainedMeasurements: Measurements = {};
             const retainedKeys = new Set<string>();
+
             for (const atom of next) {
                 const key = atom.key;
                 retainedKeys.add(key);
                 const measured = mountedMeasurements.current.get(key);
+
                 if (measured?.size.width === atom.width) {
                     retainedMeasurements[String(atom.docPos)] = measured.size;
                 }
             }
+
             for (const key of mountedMeasurements.current.keys()) {
-                if (!retainedKeys.has(key)) mountedMeasurements.current.delete(key);
+                if (!retainedKeys.has(key)) {
+                    mountedMeasurements.current.delete(key);
+                }
             }
+
             // Unchanged mounted sizes do not emit another Yoga onLayout event.
-            setMeasurementState((previous) =>
+            setMeasurementState(previous =>
                 previous.generation === value.generation
                     ? previous
                     : {
-                          generation: value.generation,
-                          revision: Object.keys(retainedMeasurements).length > 0 ? 1 : 0,
-                          values: retainedMeasurements,
-                      }
-            );
-            setLayout((previous) =>
+                        generation: value.generation,
+                        revision: Object.keys(retainedMeasurements).length > 0 ? 1 : 0,
+                        values: retainedMeasurements,
+                    });
+
+            setLayout(previous =>
                 previous?.generation === value.generation && previous.json === value.atomsJson
                     ? previous
-                    : { generation: value.generation, json: value.atomsJson, positions: next }
-            );
+                    : { generation: value.generation, json: value.atomsJson, positions: next });
         } catch {
             mountedMeasurements.current.clear();
             setLayout(null);
+
             latest.onError?.({
                 domain: 'viewer',
                 code: 'INVALID_ATOM_LAYOUT',
@@ -255,27 +308,35 @@ export function useViewerAtoms({
 
     const onContainerLayout = useCallback((event: LayoutChangeEvent) => {
         const next = event.nativeEvent.layout.width;
-        if (Number.isFinite(next) && next > 0)
-            setWidth((previous) => (previous === next ? previous : next));
+
+        if (Number.isFinite(next) && next > 0) {
+            setWidth(previous => (previous === next ? previous : next));
+        }
     }, []);
 
     const updateQueues = useRef(new Map<string, Promise<void>>());
+
     const acknowledged = useRef(
         new Map<string, { generation: string; attrs: Record<string, unknown> }>()
     );
+
     useLayoutEffect(() => {
         acknowledged.current.clear();
-    }, [generation]);
+    }, [ generation ]);
+
     const updateAttrs = useCallback(
         (owner: string, atom: AtomPosition, update: AtomAttrsUpdate): Promise<void> => {
-            const execute = async () => {
+            const execute = async() => {
                 const latest = current.current;
-                if (!mounted.current)
+
+                if (!mounted.current) {
                     throw new AtomUpdateAttrsError('not-ready', 'The viewer is unmounted.');
+                }
+
                 if (
                     owner !== latest.generation ||
                     !latest.positions.some(
-                        (position) =>
+                        position =>
                             position.key === atom.key && position.attrsJson === atom.attrsJson
                     )
                 ) {
@@ -284,29 +345,36 @@ export function useViewerAtoms({
                         'The viewer content has changed.'
                     );
                 }
-                if (latest.readOnly || !latest.onUpdateAtomAttrs)
+
+                if (latest.readOnly || !latest.onUpdateAtomAttrs) {
                     throw new AtomUpdateAttrsError(
                         'not-applicable',
                         'Viewer updates require readOnly={false} and onUpdateAtomAttrs.'
                     );
+                }
+
                 const accepted = acknowledged.current.get(atom.key);
                 const attrs = accepted?.generation === owner ? accepted.attrs : atom.attrs;
                 const partial = resolveAtomAttrsUpdate(attrs, update);
                 const definition = latest.definitions.get(atom.nodeType)!;
+
                 try {
                     validateAttributes({ ...attrs, ...partial }, definition.attrs ?? {});
+
                     if (
                         definition.idAttribute &&
                         Object.prototype.hasOwnProperty.call(partial, definition.idAttribute) &&
                         partial[definition.idAttribute] !== attrs[definition.idAttribute]
-                    )
+                    ) {
                         throw new Error('An atom identity cannot be changed.');
+                    }
                 } catch (error) {
                     throw new AtomUpdateAttrsError(
                         'not-applicable',
                         error instanceof Error ? error.message : String(error)
                     );
                 }
+
                 await latest.onUpdateAtomAttrs({
                     nodeType: atom.nodeType,
                     atomId: atom.atomId,
@@ -314,20 +382,30 @@ export function useViewerAtoms({
                     attrs,
                     partial,
                 });
-                if (mounted.current && current.current.generation === owner)
+
+                if (mounted.current && current.current.generation === owner) {
                     acknowledged.current.set(atom.key, {
                         generation: owner,
                         attrs: { ...attrs, ...partial },
                     });
+                }
             };
+
             const previous = updateQueues.current.get(atom.key);
-            const result = previous ? previous.catch(() => {}).then(execute) : execute();
+
+            const result = previous ? previous.catch(() => {
+            }).then(execute) : execute();
+
             updateQueues.current.set(atom.key, result);
+
             const clean = () => {
-                if (updateQueues.current.get(atom.key) === result)
+                if (updateQueues.current.get(atom.key) === result) {
                     updateQueues.current.delete(atom.key);
+                }
             };
+
             void result.then(clean, clean);
+
             return result;
         },
         []
@@ -342,6 +420,7 @@ export function useViewerAtoms({
         ) => {
             const latest = current.current;
             const measured = event.nativeEvent.layout;
+
             if (
                 !mounted.current ||
                 owner !== latest.generation ||
@@ -352,24 +431,33 @@ export function useViewerAtoms({
                 measured.height < 0 ||
                 Math.abs(measured.width - atom.width) > 1 ||
                 !latest.renderedPositions.some(
-                    (position) =>
+                    position =>
                         position.docPos === atom.docPos &&
                         position.nodeType === atom.nodeType &&
                         position.width === atom.width &&
                         position.attrsJson === atom.attrsJson
                 )
-            )
+            ) {
                 return;
+            }
+
             mountedMeasurements.current.set(atom.key, {
                 nodeType: atom.nodeType,
                 size: { width: atom.width, height: measured.height },
             });
-            if (latest.pendingLayout) return;
-            setMeasurementState((previous) => {
+
+            if (latest.pendingLayout) {
+                return;
+            }
+
+            setMeasurementState(previous => {
                 const values = previous.generation === owner ? previous.values : {};
                 const existing = values[String(atom.docPos)];
-                if (existing?.width === atom.width && existing.height === measured.height)
+
+                if (existing?.width === atom.width && existing.height === measured.height) {
                     return previous;
+                }
+
                 return {
                     generation: owner,
                     revision: previous.generation === owner ? previous.revision + 1 : 1,
@@ -383,9 +471,13 @@ export function useViewerAtoms({
         []
     );
 
-    const children = renderedPositions.map((atom) => {
+    const children = renderedPositions.map(atom => {
         const Component = definitions.get(atom.nodeType)?.component;
-        if (!Component) return null;
+
+        if (!Component) {
+            return null;
+        }
+
         return (
             <View
                 key={atom.key}
@@ -400,13 +492,14 @@ export function useViewerAtoms({
                     width: atom.width,
                     opacity: pendingLayout ? 0 : 1,
                 }}
-                onLayout={(event) => measure(generation, atom, Component, event)}>
+                onLayout={event => measure(generation, atom, Component, event)}
+            >
                 <AtomHost
                     component={Component}
                     width={atom.width}
                     estimatedHeight={atom.height}
                     visible={atomIsVisible(atom.y, atom.height, viewport)}
-                    onMeasure={(event) => measure(generation, atom, Component, event)}
+                    onMeasure={event => measure(generation, atom, Component, event)}
                     atomProps={{
                         attrs: atom.attrs,
                         nodeType: atom.nodeType,
@@ -414,13 +507,16 @@ export function useViewerAtoms({
                         readOnly,
                         interactive: interactive && !pendingLayout,
                         isViewer: true,
-                        updateAttrs: (partial) => updateAttrs(layout!.generation, atom, partial),
+                        updateAttrs: partial => updateAttrs(layout!.generation, atom, partial),
                     }}
                 />
             </View>
         );
     });
-    return { enabled, themeJson: configuredThemeJson, onAtomLayout, onContainerLayout, children };
+
+    return {
+        enabled, themeJson: configuredThemeJson, onAtomLayout, onContainerLayout, children,
+    };
 }
 
 /** @deprecated Use RichTextViewerAtomAttrsUpdateEvent instead. */