fix(content-translator): translate hasMany text fields per entry (#167)

Author: jhb-dev

content-translator/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- fix: translate each entry of `hasMany` text fields individually so keyword/tag lists are translated instead of crashing
 - fix: translate fields inside unnamed (presentational) groups instead of throwing an "Unnamed groups are currently not supported" error
 - fix: skip fields and tabs named `__proto__`, `constructor`, or `prototype` during traversal to avoid prototype-polluting writes when a user-supplied Payload config contains such a name
 

content-translator/dev/payload-types.ts

@@ -146,6 +146,7 @@ export interface Page {
     };
     [k: string]: unknown;
   } | null;
+  keywords?: string[] | null;
   meta?: {
     title?: string | null;
     description?: string | null;
@@ -332,6 +333,7 @@ export interface PagesSelect<T extends boolean = true> {
   title?: T;
   slug?: T;
   content?: T;
+  keywords?: T;
   meta?:
     | T
     | {

content-translator/dev/src/collections/pages.ts

@@ -22,6 +22,13 @@ export const pagesSchema: CollectionConfig = {
       required: false,
       localized: true,
     },
+    {
+      // hasMany text field: each keyword is translated individually
+      name: 'keywords',
+      type: 'text',
+      hasMany: true,
+      localized: true,
+    },
     {
       name: 'meta',
       type: 'group',

content-translator/dev/src/seed.ts

@@ -8,6 +8,7 @@ interface AuthorSeedData {
 }
 
 interface PageSeedData {
+  keywords: string[]
   slug: string
   title: string
 }
@@ -73,18 +74,22 @@ export const seed = async (payload: Payload) => {
   const pages: PageSeedData[] = [
     {
       slug: 'home',
+      keywords: ['welcome', 'home page', 'getting started'],
       title: 'Welcome to Our Website',
     },
     {
       slug: 'about',
+      keywords: ['company', 'team', 'our story'],
       title: 'About Our Company',
     },
     {
       slug: 'services',
+      keywords: ['services', 'solutions', 'consulting'],
       title: 'Our Services and Solutions',
     },
     {
       slug: 'contact',
+      keywords: ['contact', 'support', 'get in touch'],
       title: 'Get in Touch With Us',
     },
   ]

content-translator/src/translate/traverseFields.ts

@@ -320,7 +320,7 @@ export const traverseFields = ({
 
         break
       case 'text':
-      case 'textarea':
+      case 'textarea': {
         if (field.custom && typeof field.custom === 'object' && field.custom.translatorSkip) {
           break
         }
@@ -337,13 +337,43 @@ export const traverseFields = ({
           break
         }
 
+        const fieldValue = siblingDataFrom[field.name]
+
+        // `hasMany` text fields store an array of strings (e.g. keywords /
+        // tags). Translate each element individually - sending the whole
+        // array as a single value makes the resolver return a non-string,
+        // which then crashes in he.decode(...) ("e.replace is not a
+        // function"). Pre-seed the target with the originals and replace
+        // each entry in place as its translation resolves, so a skipped or
+        // failed element keeps its original text.
+        if (Array.isArray(fieldValue)) {
+          const translatedArray = [...fieldValue]
+          siblingDataTranslated[field.name] = translatedArray
+
+          fieldValue.forEach((item, itemIndex) => {
+            if (typeof item !== 'string' || isEmpty(item)) {
+              return
+            }
+
+            valuesToTranslate.push({
+              onTranslate: (translated) => {
+                translatedArray[itemIndex] = translated
+              },
+              value: item,
+            })
+          })
+
+          break
+        }
+
         valuesToTranslate.push({
-          onTranslate: (translated: string) => {
+          onTranslate: (translated) => {
             siblingDataTranslated[field.name] = translated
           },
-          value: siblingDataFrom[field.name],
+          value: fieldValue,
         })
         break
+      }
 
       default:
         break

content-translator/test/traverseFields.test.ts

@@ -224,6 +224,66 @@ describe('traverseFields - emptyOnly with missing target sub-objects (#137)', ()
   })
 })
 
+describe('traverseFields - hasMany text fields', () => {
+  test('translates each element of a hasMany text field individually', () => {
+    const fields: Field[] = [{ name: 'keywords', type: 'text', hasMany: true, localized: true }]
+
+    const translated = runTraverse(fields, { keywords: ['alpha', 'beta', 'gamma'] }, false)
+
+    assert.deepEqual(translated.keywords, [
+      'TRANSLATED:alpha',
+      'TRANSLATED:beta',
+      'TRANSLATED:gamma',
+    ])
+  })
+
+  test('keeps non-string entries in place while translating the rest', () => {
+    const fields: Field[] = [{ name: 'keywords', type: 'text', hasMany: true, localized: true }]
+
+    const translatedData: Record<string, unknown> = {}
+    const valuesToTranslate: ValueToTranslate[] = []
+
+    traverseFields({
+      dataFrom: { keywords: ['alpha', 42, 'gamma'] },
+      emptyOnly: false,
+      fields,
+      payloadConfig,
+      translatedData,
+      valuesToTranslate,
+    })
+
+    // Only the two strings are sent to the resolver; the non-string is left alone.
+    assert.equal(valuesToTranslate.length, 2)
+
+    for (const v of valuesToTranslate) {
+      v.onTranslate(`TRANSLATED:${v.value}`)
+    }
+
+    assert.deepEqual(translatedData.keywords, ['TRANSLATED:alpha', 42, 'TRANSLATED:gamma'])
+  })
+
+  test('does not send the whole array as a single value', () => {
+    const fields: Field[] = [{ name: 'keywords', type: 'text', hasMany: true, localized: true }]
+
+    const valuesToTranslate: ValueToTranslate[] = []
+
+    traverseFields({
+      dataFrom: { keywords: ['alpha', 'beta'] },
+      emptyOnly: false,
+      fields,
+      payloadConfig,
+      translatedData: {},
+      valuesToTranslate,
+    })
+
+    assert.equal(valuesToTranslate.length, 2)
+    assert.deepEqual(
+      valuesToTranslate.map((v) => v.value),
+      ['alpha', 'beta'],
+    )
+  })
+})
+
 describe('traverseFields - unnamed (presentational) groups', () => {
   test('translates a localized field inside an unnamed group stored in place', () => {
     const fields: Field[] = [