feat(richtext-lexical): i18n support (#6524)

Author: AlessioGr

packages/next/src/views/Account/index.tsx

@@ -40,7 +40,7 @@ export const Account: React.FC<AdminViewProps> = async ({
 
   const collectionConfig = config.collections.find((collection) => collection.slug === userSlug)
 
-  if (collectionConfig) {
+  if (collectionConfig && user?.id) {
     const { docPermissions, hasPublishPermission, hasSavePermission } =
       await getDocumentPermissions({
         id: user.id,

packages/payload/src/admin/RichText.ts

@@ -1,4 +1,4 @@
-import type { I18nClient } from '@payloadcms/translations'
+import type { GenericLanguages, I18n, I18nClient } from '@payloadcms/translations'
 import type { JSONSchema4 } from 'json-schema'
 import type React from 'react'
 
@@ -28,11 +28,12 @@ type RichTextAdapterBase<
   }) => Map<string, React.ReactNode>
   generateSchemaMap?: (args: {
     config: SanitizedConfig
-    i18n: I18nClient
+    i18n: I18n<any, any>
     schemaMap: Map<string, Field[]>
     schemaPath: string
   }) => Map<string, Field[]>
   hooks?: FieldBase['hooks']
+  i18n?: Partial<GenericLanguages>
   outputSchema?: ({
     collectionIDFieldTypes,
     config,

packages/payload/src/config/sanitize.ts

@@ -17,6 +17,7 @@ import { InvalidConfiguration } from '../errors/index.js'
 import { sanitizeGlobals } from '../globals/config/sanitize.js'
 import getPreferencesCollection from '../preferences/preferencesCollection.js'
 import checkDuplicateCollections from '../utilities/checkDuplicateCollections.js'
+import { deepMerge } from '../utilities/deepMerge.js'
 import { isPlainObject } from '../utilities/isPlainObject.js'
 import { defaults } from './defaults.js'
 
@@ -154,6 +155,9 @@ export const sanitizeConfig = async (incomingConfig: Config): Promise<SanitizedC
       config: config as SanitizedConfig,
       isRoot: true,
     })
+    if (config.editor.i18n && Object.keys(config.editor.i18n).length >= 0) {
+      config.i18n.translations = deepMerge(config.i18n.translations, config.editor.i18n)
+    }
   }
 
   const promises: Promise<void>[] = []

packages/payload/src/fields/config/sanitize.ts

@@ -8,6 +8,7 @@ import {
   InvalidFieldRelationship,
   MissingFieldType,
 } from '../../errors/index.js'
+import { deepMerge } from '../../utilities/deepMerge.js'
 import { formatLabels, toWords } from '../../utilities/formatLabels.js'
 import { baseBlockFields } from '../baseFields/baseBlockFields.js'
 import { baseIDField } from '../baseFields/baseIDField.js'
@@ -168,6 +169,10 @@ export const sanitizeFields = async ({
           })
         }
 
+        if (field.editor.i18n && Object.keys(field.editor.i18n).length >= 0) {
+          config.i18n.translations = deepMerge(config.i18n.translations, field.editor.i18n)
+        }
+
         // Add editor adapter hooks to field hooks
         if (!field.hooks) field.hooks = {}
 

packages/richtext-lexical/package.json

@@ -37,7 +37,8 @@
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
-    "prepublishOnly": "pnpm clean && pnpm turbo build"
+    "prepublishOnly": "pnpm clean && pnpm turbo build",
+    "translateNewKeys": "tsx scripts/translateNewKeys.ts"
   },
   "dependencies": {
     "@faceless-ui/modal": "2.0.2",

packages/richtext-lexical/scripts/translateNewKeys.ts

@@ -0,0 +1,68 @@
+import type {
+  AcceptedLanguages,
+  GenericLanguages,
+  GenericTranslationsObject,
+} from '@payloadcms/translations'
+
+import * as fs from 'node:fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { translateObject } from '../../translations/scripts/translateNewKeys/index.js'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+// Function to get all files with a specific name recursively in all subdirectories
+function findFilesRecursively(startPath, filter) {
+  let results = []
+
+  const entries = fs.readdirSync(startPath, { withFileTypes: true })
+
+  entries.forEach((dirent) => {
+    const fullPath = path.join(startPath, dirent.name)
+
+    if (dirent.isDirectory()) {
+      results = results.concat(findFilesRecursively(fullPath, filter))
+    } else {
+      if (dirent.name === filter) {
+        results.push(fullPath)
+      }
+    }
+  })
+
+  return results
+}
+
+const i18nFilePaths = findFilesRecursively(path.resolve(dirname, '../src'), 'i18n.ts')
+
+async function translate() {
+  for (const i18nFilePath of i18nFilePaths) {
+    const imported = await import(i18nFilePath)
+    const translationsObject = imported.i18n as Partial<GenericLanguages>
+    const allTranslations: {
+      [key in AcceptedLanguages]?: {
+        dateFNSKey: string
+        translations: GenericTranslationsObject
+      }
+    } = {}
+    for (const lang in translationsObject) {
+      allTranslations[lang] = {
+        dateFNSKey: 'en',
+        translations: translationsObject[lang],
+      }
+    }
+
+    console.log('Translating', i18nFilePath)
+    await translateObject({
+      allTranslationsObject: allTranslations,
+      fromTranslationsObject: translationsObject.en,
+      inlineFile: i18nFilePath,
+      tsFilePrefix: `import { GenericLanguages } from '@payloadcms/translations'
+
+export const i18n: Partial<GenericLanguages> = `,
+      tsFileSuffix: ``,
+    })
+  }
+}
+
+void translate()

packages/richtext-lexical/src/field/features/horizontalRule/feature.client.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import type { ClientTranslationKeys } from '@payloadcms/translations'
+
 import { $isNodeSelection } from 'lexical'
 
 import type { FeatureProviderProviderClient } from '../types.js'
@@ -36,7 +38,10 @@ const HorizontalRuleFeatureClient: FeatureProviderProviderClient<undefined> = (p
                 Icon: HorizontalRuleIcon,
                 key: 'horizontalRule',
                 keywords: ['hr', 'horizontal rule', 'line', 'separator'],
-                label: `Horizontal Rule`,
+                label: ({ i18n }) => {
+                  return i18n.t('lexical:horizontalRule:label')
+                },
+
                 onSelect: ({ editor }) => {
                   editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
                 },
@@ -47,6 +52,7 @@ const HorizontalRuleFeatureClient: FeatureProviderProviderClient<undefined> = (p
           },
         ],
       },
+
       toolbarFixed: {
         groups: [
           toolbarAddDropdownGroupWithItems([
@@ -61,7 +67,9 @@ const HorizontalRuleFeatureClient: FeatureProviderProviderClient<undefined> = (p
                 return $isHorizontalRuleNode(firstNode)
               },
               key: 'horizontalRule',
-              label: `Horizontal Rule`,
+              label: ({ i18n }) => {
+                return i18n.t('lexical:horizontalRule:label')
+              },
               onSelect: ({ editor }) => {
                 editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
               },

packages/richtext-lexical/src/field/features/horizontalRule/feature.server.ts

@@ -2,6 +2,7 @@ import type { FeatureProviderProviderServer } from '../types.js'
 
 import { createNode } from '../typeUtilities.js'
 import { HorizontalRuleFeatureClientComponent } from './feature.client.js'
+import { i18n } from './i18n.js'
 import { MarkdownTransformer } from './markdownTransformer.js'
 import { HorizontalRuleNode } from './nodes/HorizontalRuleNode.js'
 
@@ -12,6 +13,7 @@ export const HorizontalRuleFeature: FeatureProviderProviderServer<undefined, und
     feature: () => {
       return {
         ClientComponent: HorizontalRuleFeatureClientComponent,
+        i18n,
         markdownTransformers: [MarkdownTransformer],
         nodes: [
           createNode({

packages/richtext-lexical/src/field/features/horizontalRule/i18n.ts

@@ -0,0 +1,100 @@
+import type { GenericLanguages } from '@payloadcms/translations'
+
+export const i18n: Partial<GenericLanguages> = {
+  ar: {
+    label: 'القاعدة الأفقية',
+  },
+  az: {
+    label: 'Üfüqi Xətt',
+  },
+  bg: {
+    label: 'Хоризонтална линия',
+  },
+  cs: {
+    label: 'Vodorovný pravítko',
+  },
+  de: {
+    label: 'Trennlinie',
+  },
+  en: {
+    label: 'Horizontal Rule',
+  },
+  es: {
+    label: 'Regla Horizontal',
+  },
+  fa: {
+    label: 'قاعده افقی',
+  },
+  fr: {
+    label: 'Règle horizontale',
+  },
+  he: {
+    label: 'קו אופקי',
+  },
+  hr: {
+    label: 'Vodoravna linija',
+  },
+  hu: {
+    label: 'Vízszintes vonal',
+  },
+  it: {
+    label: 'Regola Orizzontale',
+  },
+  ja: {
+    label: '水平線',
+  },
+  ko: {
+    label: '수평 규칙',
+  },
+  my: {
+    label: 'Peraturan Mendatar',
+  },
+  nb: {
+    label: 'Horisontal Regel',
+  },
+  nl: {
+    label: 'Horizontale Regel',
+  },
+  pl: {
+    label: 'Pozioma Linia',
+  },
+  pt: {
+    label: 'Regra Horizontal',
+  },
+  ro: {
+    label: 'Linie orizontală',
+  },
+  rs: {
+    label: 'Horizontalna linija',
+  },
+  'rs-latin': {
+    label: 'Horizontalna linija',
+  },
+  ru: {
+    label: 'Горизонтальная линия',
+  },
+  sk: {
+    label: 'Vodorovná čiara',
+  },
+  sv: {
+    label: 'Horisontell linje',
+  },
+  th: {
+    label: 'กฎขีดตรง',
+  },
+  tr: {
+    label: 'Yatay Çizgi',
+  },
+  uk: {
+    label: 'Горизонтальна лінія',
+  },
+  vi: {
+    label: 'Quy tắc ngang',
+  },
+  zh: {
+    label: '水平线',
+  },
+  'zh-TW': {
+    label: '水平線',
+  },
+}

packages/richtext-lexical/src/field/features/toolbars/types.ts

@@ -49,7 +49,7 @@ export type ToolbarGroupItem = {
   }) => boolean
   key: string
   /** The label is displayed as text if the item is part of a dropdown group */
-  label?: (({ i18n }: { i18n: I18nClient }) => string) | string
+  label?: (({ i18n }: { i18n: I18nClient<{}, string> }) => string) | string
   onSelect?: ({ editor, isActive }: { editor: LexicalEditor; isActive: boolean }) => void
   order?: number
 }