fix: enhance onChange handler for paste operations in InternationalizedInput

- Ensure wrapped onChange handler correctly processes both single and multiple patch operations.
- Add checks for empty or uninitialized Portable Text fields to prevent errors during paste operations.
- Improve patch transformation logic to handle nested structures more robustly.

This update addresses issues related to applying insert patches to non-existent structures, ensuring a smoother user experience when interacting with internationalized fields.

Author: wiiiimm

src/components/InternationalizedInput.tsx

@@ -38,49 +38,88 @@ export default function InternationalizedInput(
   const originalOnChange = props.inputProps.onChange
 
   // Create a wrapped onChange handler to intercept patches for paste operations
-  const wrappedOnChange = useCallback((patches: any) => {
-    // Check if this is a paste operation into an empty or uninitialized Portable Text field
-    const valueField = props.value?.value
-    const isEmptyOrUndefined = valueField === undefined ||
-                               (Array.isArray(valueField) && valueField.length === 0)
-
-    if (isEmptyOrUndefined) {
-      // Check for insert patches that are trying to operate on a non-existent structure
-      const hasProblematicInsert = patches.some((patch: any) => {
-        // Look for insert patches targeting the value field or direct array index
-        if (patch.type === 'insert' && patch.path && patch.path.length > 0) {
-          // The path might be ['value', index] or just [index] depending on context
-          const isTargetingValue = patch.path[0] === 'value' || typeof patch.path[0] === 'number'
-          return isTargetingValue
-        }
-        return false
-      })
-
-      if (hasProblematicInsert) {
-        // First, ensure the value field exists as an empty array if it doesn't
-        const initPatch = valueField === undefined ? { type: 'setIfMissing', path: ['value'], value: [] } : null
-
-        // Transform the patches to ensure they work with the nested structure
-        const fixedPatches = patches.map((patch: any) => {
-          if (patch.type === 'insert' && patch.path) {
-            // Ensure the path is correct for the nested structure
-            const fixedPath = patch.path[0] === 'value' ? patch.path : ['value', ...patch.path]
-            const fixedPatch = { ...patch, path: fixedPath }
-            return fixedPatch
+  const wrappedOnChange = useCallback(
+    (patches: any) => {
+      // Ensure patches is an array before proceeding with paste logic
+      // For single patch operations (like unset), pass through directly
+      if (!Array.isArray(patches)) {
+        return originalOnChange(patches)
+      }
+
+      // Check if this is a paste operation into an empty or uninitialized Portable Text field
+      const valueField = props.value?.value
+      const isEmptyOrUndefined =
+        valueField === undefined ||
+        valueField === null ||
+        (Array.isArray(valueField) && valueField.length === 0)
+
+      if (isEmptyOrUndefined) {
+        // Check for insert patches that are trying to operate on a non-existent structure
+        const hasProblematicInsert = patches.some((patch: any) => {
+          // Ensure patch exists and has required properties
+          if (!patch || typeof patch !== 'object') {
+            return false
           }
-          return patch
-        })
 
-        // If we need to initialize the field, include that patch first
-        const allPatches = initPatch ? [initPatch, ...fixedPatches] : fixedPatches
+          // Look for insert patches targeting the value field or direct array index
+          if (
+            patch.type === 'insert' &&
+            patch.path &&
+            Array.isArray(patch.path) &&
+            patch.path.length > 0
+          ) {
+            // The path might be ['value', index] or just [index] depending on context
+            const isTargetingValue =
+              patch.path[0] === 'value' || typeof patch.path[0] === 'number'
+            return isTargetingValue
+          }
+          return false
+        })
 
-        return originalOnChange(allPatches)
+        if (hasProblematicInsert) {
+          // First, ensure the value field exists as an empty array if it doesn't
+          const initPatch =
+            valueField === undefined
+              ? {type: 'setIfMissing', path: ['value'], value: []}
+              : null
+
+          // Transform the patches to ensure they work with the nested structure
+          const fixedPatches = patches.map((patch: any) => {
+            // Ensure patch exists and has required properties
+            if (!patch || typeof patch !== 'object') {
+              return patch
+            }
+
+            if (
+              patch.type === 'insert' &&
+              patch.path &&
+              Array.isArray(patch.path)
+            ) {
+              // Ensure the path is correct for the nested structure
+              const fixedPath =
+                patch.path[0] === 'value'
+                  ? patch.path
+                  : ['value', ...patch.path]
+              const fixedPatch = {...patch, path: fixedPath}
+              return fixedPatch
+            }
+            return patch
+          })
+
+          // If we need to initialize the field, include that patch first
+          const allPatches = initPatch
+            ? [initPatch, ...fixedPatches]
+            : fixedPatches
+
+          return originalOnChange(allPatches)
+        }
       }
-    }
 
-    // For all other cases, pass through unchanged
-    return originalOnChange(patches)
-  }, [props.value, originalOnChange])
+      // For all other cases, pass through unchanged
+      return originalOnChange(patches)
+    },
+    [props.value, originalOnChange]
+  )
 
   const inlineProps = {
     ...props.inputProps,