fix: initialize array fields properly when adding locales

- Fix document-level add locale button for Portable Text fields
- Detect array-type fields and initialize with [] instead of undefined
- Add paste operation support for empty internationalized fields
- Field-level and unstable_fieldAction buttons remain unchanged

Resolves 'Attempt to apply insert patch to non-array value' error
that occurred only with document-level locale addition buttons.

Author: wiiiimm

src/components/DocumentAddButtons.tsx

@@ -7,6 +7,8 @@ import {
   isSanityDocument,
   PatchEvent,
   setIfMissing,
+  useClient,
+  useSchema,
 } from 'sanity'
 import {useDocumentPane} from 'sanity/structure'
 
@@ -27,9 +29,53 @@ export default function DocumentAddButtons(props: DocumentAddButtonsProps) {
 
   const toast = useToast()
   const {onChange} = useDocumentPane()
+  const schema = useSchema()
 
   const documentsToTranslation = getDocumentsToTranslate(value, [])
 
+  // Helper function to determine if a field should be initialized as an array
+  const getInitialValueForType = useCallback((typeName: string): any => {
+    if (!typeName) return undefined
+
+    // Extract the base type name from internationalized array type
+    // e.g., "internationalizedArrayBodyValue" -> "body"
+    const match = typeName.match(/^internationalizedArray(.+)Value$/)
+    if (!match) return undefined
+
+    const baseTypeName = match[1].charAt(0).toLowerCase() + match[1].slice(1)
+
+    // Check if it's a known array-based type (Portable Text fields)
+    const arrayBasedTypes = ['body', 'htmlContent', 'blockContent', 'portableText']
+    if (arrayBasedTypes.includes(baseTypeName)) {
+      return []
+    }
+
+    // Try to look up the schema type to determine if it's an array
+    try {
+      const schemaType = schema.get(typeName)
+      if (schemaType) {
+        // Check if this is an object type with a 'value' field
+        const valueField = (schemaType as any)?.fields?.find((f: any) => f.name === 'value')
+        if (valueField) {
+          const fieldType = valueField.type
+          // Check if the value field is an array type
+          if (fieldType?.jsonType === 'array' ||
+              fieldType?.name === 'array' ||
+              fieldType?.type === 'array' ||
+              fieldType?.of !== undefined ||
+              arrayBasedTypes.includes(fieldType?.name)) {
+            return []
+          }
+        }
+      }
+    } catch (error) {
+      // If we can't determine from schema, fall back to undefined
+      console.warn('Could not determine field type from schema:', typeName, error)
+    }
+
+    return undefined
+  }, [schema])
+
   const handleDocumentButtonClick = useCallback(
     async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       const languageId = event.currentTarget.value
@@ -77,13 +123,16 @@ export default function DocumentAddButtons(props: DocumentAddButtonsProps) {
       for (const toTranslate of removeDuplicates) {
         const path = toTranslate.path
 
+        // Get the appropriate initial value for this field type
+        const initialValue = getInitialValueForType(toTranslate._type)
+
         const ifMissing = setIfMissing([], path)
         const insertValue = insert(
           [
             {
               _key: languageId,
               _type: toTranslate._type,
-              value: undefined,
+              value: initialValue, // Use the determined initial value instead of undefined
             },
           ],
           'after',
@@ -95,7 +144,7 @@ export default function DocumentAddButtons(props: DocumentAddButtonsProps) {
 
       onChange(PatchEvent.from(patches.flat()))
     },
-    [documentsToTranslation, onChange, toast]
+    [documentsToTranslation, getInitialValueForType, onChange, toast]
   )
   return (
     <Stack space={3}>

src/components/InternationalizedInput.tsx

@@ -34,6 +34,54 @@ export default function InternationalizedInput(
     props.path.slice(0, -1)
   ) as InternationalizedValue[]
 
+  // Extract the original onChange to avoid dependency issues
+  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
+          }
+          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])
+
   const inlineProps = {
     ...props.inputProps,
     // This is the magic that makes inline editing work?
@@ -43,6 +91,8 @@ export default function InternationalizedInput(
     // This just overrides the type
     // Remove this as it shouldn't be necessary?
     value: props.value as InternationalizedValue,
+    // Use our wrapped onChange handler
+    onChange: wrappedOnChange,
   }
 
   const {validation, value, onChange, readOnly} = inlineProps
@@ -137,7 +187,7 @@ export default function InternationalizedInput(
         </Card>
         <Flex align="center" gap={2}>
           <Card flex={1} tone="inherit">
-            {props.inputProps.renderInput(props.inputProps)}
+            {props.inputProps.renderInput(inlineProps)}
           </Card>
 
           <Card tone="inherit">