sanity-plugin-internationalized-array 3.1.4 → 3.1.6

package/src/components/DocumentAddButtons.tsx

@@ -7,6 +7,7 @@ import {
   isSanityDocument,
   PatchEvent,
   setIfMissing,
+  useSchema,
 } from 'sanity'
 import {useDocumentPane} from 'sanity/structure'
 
@@ -21,15 +22,79 @@ type DocumentAddButtonsProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: Record<string, any> | undefined
 }
-export default function DocumentAddButtons(props: DocumentAddButtonsProps) {
+export default function DocumentAddButtons(
+  props: DocumentAddButtonsProps
+): React.ReactElement {
   const {filteredLanguages} = useInternationalizedArrayContext()
   const value = isSanityDocument(props.value) ? props.value : undefined
 
   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): unknown => {
+      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
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const valueField = (schemaType as any)?.fields?.find(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (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 +142,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 +163,7 @@ export default function DocumentAddButtons(props: DocumentAddButtonsProps) {
 
       onChange(PatchEvent.from(patches.flat()))
     },
-    [documentsToTranslation, onChange, toast]
+    [documentsToTranslation, getInitialValueForType, onChange, toast]
   )
   return (
     <Stack space={3}>

package/src/components/Feedback.tsx

@@ -1,4 +1,5 @@
 import {Card, Code, Stack, Text} from '@sanity/ui'
+import type React from 'react'
 
 const schemaExample = {
   languages: [
@@ -7,7 +8,7 @@ const schemaExample = {
   ],
 }
 
-export default function Feedback() {
+export default function Feedback(): React.ReactElement {
   return (
     <Card tone="caution" border radius={2} padding={3}>
       <Stack space={4}>

package/src/components/InternationalizedArray.tsx

@@ -29,7 +29,7 @@ export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
 
 export default function InternationalizedArray(
   props: InternationalizedArrayProps
-) {
+): React.ReactElement {
   const {members, value, schemaType, onChange} = props
 
   const readOnly =
@@ -131,7 +131,7 @@ export default function InternationalizedArray(
     languages,
   ])
 
-  // TODO: This is reordering and re-setting the whole array, it could be surgical
+  // NOTE: This is reordering and re-setting the whole array, it could be surgical
   const handleRestoreOrder = useCallback(() => {
     if (!value?.length || !languages?.length) {
       return

package/src/components/InternationalizedArrayContext.tsx

@@ -1,12 +1,13 @@
 import {useLanguageFilterStudioContext} from '@sanity/language-filter'
 import {Stack} from '@sanity/ui'
 import equal from 'fast-deep-equal'
+import type React from 'react'
 import {createContext, useContext, useDeferredValue, useMemo} from 'react'
 import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {useDocumentPane} from 'sanity/structure'
 import {suspend} from 'suspend-react'
 
-import {namespace, version} from '../cache'
+import {createCacheKey, setFunctionCache} from '../cache'
 import {CONFIG_DEFAULT} from '../constants'
 import type {Language, PluginConfig} from '../types'
 import DocumentAddButtons from './DocumentAddButtons'
@@ -27,7 +28,7 @@ export const InternationalizedArrayContext =
     filteredLanguages: [],
   })
 
-export function useInternationalizedArrayContext() {
+export function useInternationalizedArrayContext(): InternationalizedArrayContextProps {
   return useContext(InternationalizedArrayContext)
 }
 
@@ -37,7 +38,7 @@ type InternationalizedArrayProviderProps = ObjectInputProps & {
 
 export function InternationalizedArrayProvider(
   props: InternationalizedArrayProviderProps
-) {
+): React.ReactElement {
   const {internationalizedArray} = props
 
   const client = useClient({apiVersion: internationalizedArray.apiVersion})
@@ -49,6 +50,27 @@ export function InternationalizedArrayProvider(
     [internationalizedArray.select, deferredDocument]
   )
 
+  // Use a stable workspace identifier to prevent unnecessary re-renders
+  const workspaceId = useMemo(() => {
+    // Use workspace name if available, otherwise create a stable hash
+    if (workspace?.name) {
+      return workspace.name
+    }
+    // Create a stable hash from workspace properties that matter for caching
+    const workspaceKey = {
+      name: workspace?.name,
+      title: workspace?.title,
+      // Add other stable properties as needed
+    }
+    return JSON.stringify(workspaceKey)
+  }, [workspace])
+
+  // Memoize the cache key to prevent expensive JSON.stringify calls
+  const cacheKey = useMemo(
+    () => createCacheKey(selectedValue, workspaceId),
+    [selectedValue, workspaceId]
+  )
+
   // Fetch or return languages
   const languages = Array.isArray(internationalizedArray.languages)
     ? internationalizedArray.languages
@@ -56,11 +78,22 @@ export function InternationalizedArrayProvider(
         // eslint-disable-next-line require-await
         async () => {
           if (typeof internationalizedArray.languages === 'function') {
-            return internationalizedArray.languages(client, selectedValue)
+            const result = await internationalizedArray.languages(
+              client,
+              selectedValue
+            )
+            // Populate function cache for use outside React context
+            setFunctionCache(
+              internationalizedArray.languages,
+              selectedValue,
+              result,
+              workspaceId
+            )
+            return result
           }
           return internationalizedArray.languages
         },
-        [version, namespace, selectedValue, workspace],
+        cacheKey,
         {equal}
       )
 

package/src/components/InternationalizedInput.tsx

@@ -34,6 +34,96 @@ 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(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (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
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const hasProblematicInsert = patches.some((patch: any) => {
+          // Ensure patch exists and has required properties
+          if (!patch || typeof patch !== 'object') {
+            return false
+          }
+
+          // 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
+        })
+
+        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
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          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]
+  )
+
   const inlineProps = {
     ...props.inputProps,
     // This is the magic that makes inline editing work?
@@ -43,6 +133,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 +229,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">

package/src/components/Preload.tsx

@@ -1,20 +1,30 @@
 import {memo} from 'react'
 import {useClient} from 'sanity'
 
-import {peek, preload} from '../cache'
+import {createCacheKey, peek, preloadWithKey, setFunctionCache} from '../cache'
 import type {PluginConfig} from '../types'
 
 export default memo(function Preload(
   props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
 ) {
   const client = useClient({apiVersion: props.apiVersion})
+
+  // Use the same cache key structure as the main component
+  // This should match the main component when selectedValue is empty
+  const cacheKey = createCacheKey({})
+
   if (!Array.isArray(peek({}))) {
     // eslint-disable-next-line require-await
-    preload(async () =>
-      Array.isArray(props.languages)
-        ? props.languages
-        : props.languages(client, {})
-    )
+    preloadWithKey(async () => {
+      if (Array.isArray(props.languages)) {
+        return props.languages
+      }
+      const result = await props.languages(client, {})
+      // Populate function cache for sharing with other components
+      // Use the same key structure as the main component
+      setFunctionCache(props.languages, {}, result)
+      return result
+    }, cacheKey)
   }
 
   return null

package/src/schema/array.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import {defineField, type FieldDefinition, type Rule} from 'sanity'
 
-import {peek} from '../cache'
+import {getFunctionCache, peek, setFunctionCache} from '../cache'
 import {createFieldName} from '../components/createFieldName'
 import {getSelectedValue} from '../components/getSelectedValue'
 import InternationalizedArray from '../components/InternationalizedArray'
@@ -50,7 +50,12 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     // @ts-expect-error - fix typings
     validation: (rule: Rule) =>
       rule.custom<Value[]>(async (value, context) => {
-        if (!value) {
+        if (!value || value.length === 0) {
+          return true
+        }
+
+        // Early return for simple cases to avoid expensive operations
+        if (value.length === 1 && !value[0]?._key) {
           return true
         }
 
@@ -65,7 +70,33 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
         } else if (Array.isArray(peek(selectedValue))) {
           contextLanguages = peek(selectedValue) || []
         } else if (typeof languagesFieldOption === 'function') {
-          contextLanguages = await languagesFieldOption(client, selectedValue)
+          // Try to get from function cache first (if it's the same function as the component)
+          const cachedLanguages = getFunctionCache(
+            languagesFieldOption,
+            selectedValue
+          )
+
+          if (Array.isArray(cachedLanguages)) {
+            contextLanguages = cachedLanguages
+          } else {
+            // Try suspend cache as fallback
+            const suspendCachedLanguages = peek(selectedValue)
+            if (Array.isArray(suspendCachedLanguages)) {
+              contextLanguages = suspendCachedLanguages
+            } else {
+              // Only make the async call if we don't have cached data
+              contextLanguages = await languagesFieldOption(
+                client,
+                selectedValue
+              )
+              // Cache the result for future validation calls
+              setFunctionCache(
+                languagesFieldOption,
+                selectedValue,
+                contextLanguages
+              )
+            }
+          }
         }
 
         if (value && value.length > contextLanguages.length) {
@@ -76,12 +107,13 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
           }`
         }
 
-        const nonLanguageKeys = value?.length
-          ? value.filter(
-              (item) =>
-                !contextLanguages.find((language) => item._key === language.id)
-            )
-          : []
+        // Create a Set for faster language ID lookups
+        const languageIds = new Set(contextLanguages.map((lang) => lang.id))
+
+        // Check for invalid language keys
+        const nonLanguageKeys = value.filter(
+          (item) => item?._key && !languageIds.has(item._key)
+        )
         if (nonLanguageKeys.length) {
           return {
             message: `Array item keys must be valid languages registered to the field type`,
@@ -89,27 +121,20 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
           }
         }
 
-        // Ensure there's no duplicate `language` fields
-        type KeyedValues = {
-          [key: string]: Value[]
+        // Check for duplicate language keys (more efficient)
+        const seenKeys = new Set<string>()
+        const duplicateValues: Value[] = []
+
+        for (const item of value) {
+          if (item?._key) {
+            if (seenKeys.has(item._key)) {
+              duplicateValues.push(item)
+            } else {
+              seenKeys.add(item._key)
+            }
+          }
         }
 
-        const valuesByLanguage = value?.length
-          ? value
-              .filter((item) => Boolean(item?._key))
-              .reduce((acc, cur) => {
-                if (acc[cur._key]) {
-                  return {...acc, [cur._key]: [...acc[cur._key], cur]}
-                }
-                return {
-                  ...acc,
-                  [cur._key]: [cur],
-                }
-              }, {} as KeyedValues)
-          : {}
-        const duplicateValues = Object.values(valuesByLanguage)
-          .filter((item) => item?.length > 1)
-          .flat()
         if (duplicateValues.length) {
           return {
             message: 'There can only be one field per language',