sanity-plugin-internationalized-array 2.0.0 → 2.0.1-canary.1

package/src/components/InternationalizedArrayContext.tsx

@@ -2,12 +2,8 @@ import {useLanguageFilterStudioContext} from '@sanity/language-filter'
 import {Stack} from '@sanity/ui'
 import equal from 'fast-deep-equal'
 import {createContext, useContext, useDeferredValue, useMemo} from 'react'
-import {
-  type ObjectInputProps,
-  useClient,
-  useFormBuilder,
-  useWorkspace,
-} from 'sanity'
+import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
+import {useDocumentPane} from 'sanity/structure'
 import {suspend} from 'suspend-react'
 
 import {namespace, version} from '../cache'
@@ -46,8 +42,8 @@ export function InternationalizedArrayProvider(
 
   const client = useClient({apiVersion: internationalizedArray.apiVersion})
   const workspace = useWorkspace()
-  const {value: document} = useFormBuilder()
-  const deferredDocument = useDeferredValue(document)
+  const {formState} = useDocumentPane()
+  const deferredDocument = useDeferredValue(formState?.value)
   const selectedValue = useMemo(
     () => getSelectedValue(internationalizedArray.select, deferredDocument),
     [internationalizedArray.select, deferredDocument]
@@ -87,21 +83,16 @@ export function InternationalizedArrayProvider(
 
   const showDocumentButtons =
     internationalizedArray.buttonLocations.includes('document')
+  const context = useMemo(
+    () => ({...internationalizedArray, languages, filteredLanguages}),
+    [filteredLanguages, internationalizedArray, languages]
+  )
 
   return (
-    <InternationalizedArrayContext.Provider
-      value={{
-        ...internationalizedArray,
-        languages,
-        filteredLanguages,
-      }}
-    >
+    <InternationalizedArrayContext.Provider value={context}>
       {showDocumentButtons ? (
         <Stack space={5}>
-          <DocumentAddButtons
-            schemaType={props.schemaType}
-            value={props.value}
-          />
+          <DocumentAddButtons value={props.value} />
           {props.renderDefault(props)}
         </Stack>
       ) : (

package/src/fieldActions/index.ts

@@ -18,7 +18,10 @@ import {createAddLanguagePatches} from '../utils/createAddLanguagePatches'
 
 const createTranslateFieldActions: (
   fieldActionProps: DocumentFieldActionProps,
-  context: {languages: Language[]; filteredLanguages: Language[]}
+  context: {
+    languages: Language[]
+    filteredLanguages: Language[]
+  }
 ) => DocumentFieldActionItem[] = (
   fieldActionProps,
   {languages, filteredLanguages}
@@ -61,7 +64,10 @@ const createTranslateFieldActions: (
 
 const AddMissingTranslationsFieldAction: (
   fieldActionProps: DocumentFieldActionProps,
-  context: {languages: Language[]; filteredLanguages: Language[]}
+  context: {
+    languages: Language[]
+    filteredLanguages: Language[]
+  }
 ) => DocumentFieldActionItem = (
   fieldActionProps,
   {languages, filteredLanguages}

package/src/plugin.tsx

@@ -62,10 +62,12 @@ export const internationalizedArray = definePlugin<PluginConfig>((config) => {
             return props.renderDefault(props)
           }
 
-          return InternationalizedArrayProvider({
-            ...props,
-            internationalizedArray: pluginConfig,
-          })
+          return (
+            <InternationalizedArrayProvider
+              {...props}
+              internationalizedArray={pluginConfig}
+            />
+          )
         },
       },
     },

package/src/schema/array.ts

@@ -35,7 +35,12 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
       input: InternationalizedArray,
     },
     // These options are required for validation rules – not the custom input component
-    options: {apiVersion, select, languages},
+    options: {
+      // @ts-expect-error - find out why it fails
+      apiVersion,
+      select,
+      languages,
+    },
     of: [
       defineField({
         ...(typeof type === 'string' ? {} : type),
@@ -43,6 +48,7 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
         type: objectName,
       }),
     ],
+    // @ts-expect-error - find out why it fails
     validation: (rule: Rule) =>
       rule.custom<Value[]>(async (value, context) => {
         if (!value) {

package/src/schema/object.ts

@@ -18,9 +18,9 @@ export default (config: ObjectFactoryConfig): FieldDefinition<'object'> => {
     title: `Internationalized array ${type}`,
     type: 'object',
     components: {
+      // @ts-expect-error - find out why it fails
       item: InternationalizedInput,
     },
-    // @ts-expect-error - Address this typing issue with the inner object
     fields: [
       typeof type === `string`
         ? // Define a simple field if all we have is the name as a string

package/src/types.ts

@@ -27,7 +27,7 @@ export type ArrayConfig = {
 
 export type Value = {
   _key: string
-  value?: string
+  value?: unknown
 }
 
 export type LanguageCallback = (

package/src/utils/createAddLanguagePatches.ts

@@ -31,16 +31,24 @@ export function createAddLanguagePatches(config: AddConfig): FormInsertPatch[] {
   const itemBase = {_type: createValueSchemaTypeName(schemaType)}
 
   // Create new items
-  const newItems =
-    Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0
-      ? // Just one for this language
-        addLanguageKeys.map((id) => ({...itemBase, _key: id}))
-      : // Or one for every missing language
-        filteredLanguages
-          .filter((language) =>
-            value?.length ? !value.find((v) => v._key === language.id) : true
-          )
-          .map((language) => ({...itemBase, _key: language.id}))
+  const getNewItems = () => {
+    if (Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0) {
+      return addLanguageKeys.map((id) => ({
+        ...itemBase,
+        _key: id,
+      }))
+    }
+
+    return filteredLanguages
+      .filter((language) =>
+        value?.length ? !value.find((v) => v._key === language.id) : true
+      )
+      .map((language) => ({
+        ...itemBase,
+        _key: language.id,
+      }))
+  }
+  const newItems = getNewItems()
 
   // Insert new items in the correct order
   const languagesInUse = value?.length ? value.map((v) => v) : []

package/src/utils/getDocumentsToTranslate.ts

@@ -0,0 +1,66 @@
+import {SanityDocument} from 'sanity'
+
+export interface DocumentsToTranslate {
+  path: (string | number)[]
+  pathString: string
+  _key: string
+  _type: string
+  [key: string]: unknown
+}
+
+export const getDocumentsToTranslate = (
+  value: SanityDocument | unknown,
+  rootPath: (string | number)[] = []
+): DocumentsToTranslate[] => {
+  if (Array.isArray(value)) {
+    const arrayRootPath = [...rootPath]
+
+    // if item contains internationalized return array
+    const internationalizedValues = value.filter((item) => {
+      if (Array.isArray(item)) return false
+
+      if (typeof item === 'object') {
+        const type = item?._type as string | undefined
+        return (
+          type?.startsWith('internationalizedArray') && type?.endsWith('Value')
+        )
+      }
+      return false
+    })
+
+    if (internationalizedValues.length > 0) {
+      return internationalizedValues.map((internationalizedValue) => {
+        return {
+          ...internationalizedValue,
+          path: arrayRootPath,
+          pathString: arrayRootPath.join('.'),
+        }
+      })
+    }
+
+    if (value.length > 0) {
+      return value
+        .map((item, index) =>
+          getDocumentsToTranslate(item, [...arrayRootPath, index])
+        )
+        .flat()
+    }
+
+    return []
+  }
+  if (typeof value === 'object' && value) {
+    const startsWithUnderscoreRegex = /^_/
+    const itemKeys = Object.keys(value).filter(
+      (key) => !key.match(startsWithUnderscoreRegex)
+    ) as (keyof typeof value)[]
+
+    return itemKeys
+      .map((item) => {
+        const selectedValue = value[item] as unknown
+        const path = [...rootPath, item]
+        return getDocumentsToTranslate(selectedValue, path)
+      })
+      .flat()
+  }
+  return []
+}