fix(richtext-lexical): adds support for localized placeholder (#10523)

### What?
This PR fixes a minor issue in `richtext-lexical` where editor
placeholders were not localized.

### Why?
To allow users to localize placeholders accordingly with their language
preferences in config.

### How?
By evaluating the placeholder in the editor RSC, if any is provided. The
`ContentEditable` component falls back to a default in the event that no
placeholder was provided as this was the existing behavior.

Fixes #10518

Author: akhrarovsaid

packages/richtext-lexical/src/field/rscEntry.tsx

@@ -7,11 +7,16 @@ import type {
   ServerComponentProps,
 } from 'payload'
 
+import { getTranslation } from '@payloadcms/translations'
 import { renderField } from '@payloadcms/ui/forms/renderField'
 import React from 'react'
 
 import type { SanitizedServerEditorConfig } from '../lexical/config/types.js'
-import type { LexicalFieldAdminProps, LexicalRichTextFieldProps } from '../types.js'
+import type {
+  LexicalFieldAdminClientProps,
+  LexicalFieldAdminProps,
+  LexicalRichTextFieldProps,
+} from '../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
 import { RichTextField } from '../exports/client/index.js'
@@ -64,8 +69,20 @@ export const RscEntryLexicalField: React.FC<
     })
   }
 
+  const placeholderFromArgs = args.admin?.placeholder
+  const placeholder = placeholderFromArgs
+    ? getTranslation(placeholderFromArgs, args.i18n)
+    : undefined
+
+  const admin: LexicalFieldAdminClientProps = {}
+  if (placeholder) {
+    admin.placeholder = placeholder
+  }
+  if (args.admin?.hideGutter) {
+    admin.hideGutter = true
+  }
+
   const props: LexicalRichTextFieldProps = {
-    admin: args.admin,
     clientFeatures,
     featureClientSchemaMap, // TODO: Does client need this? Why cant this just live in the server
     field: args.clientField as RichTextFieldClient,
@@ -78,6 +95,9 @@ export const RscEntryLexicalField: React.FC<
     renderedBlocks: args.renderedBlocks,
     schemaPath,
   }
+  if (Object.keys(admin).length) {
+    props.admin = admin
+  }
 
   for (const key in props) {
     if (props[key as keyof LexicalRichTextFieldProps] === undefined) {

packages/richtext-lexical/src/lexical/config/client/sanitize.ts

@@ -6,7 +6,7 @@ import type {
   ResolvedClientFeatureMap,
   SanitizedClientFeatures,
 } from '../../../features/typesClient.js'
-import type { LexicalFieldAdminProps } from '../../../types.js'
+import type { LexicalFieldAdminClientProps } from '../../../types.js'
 import type { SanitizedClientEditorConfig } from '../types.js'
 
 export const sanitizeClientFeatures = (
@@ -219,7 +219,7 @@ export const sanitizeClientFeatures = (
 export function sanitizeClientEditorConfig(
   resolvedClientFeatureMap: ResolvedClientFeatureMap,
   lexical?: LexicalEditorConfig,
-  admin?: LexicalFieldAdminProps,
+  admin?: LexicalFieldAdminClientProps,
 ): SanitizedClientEditorConfig {
   return {
     admin,

packages/richtext-lexical/src/lexical/config/types.ts

@@ -10,7 +10,7 @@ import type {
   ResolvedServerFeatureMap,
   SanitizedServerFeatures,
 } from '../../features/typesServer.js'
-import type { LexicalFieldAdminProps } from '../../types.js'
+import type { LexicalFieldAdminClientProps } from '../../types.js'
 
 export type ServerEditorConfig = {
   features: FeatureProviderServer<any, any, any>[]
@@ -29,7 +29,7 @@ export type ClientEditorConfig = {
 }
 
 export type SanitizedClientEditorConfig = {
-  admin?: LexicalFieldAdminProps
+  admin?: LexicalFieldAdminClientProps
   features: SanitizedClientFeatures
   lexical: LexicalEditorConfig
   resolvedFeatureMap: ResolvedClientFeatureMap

packages/richtext-lexical/src/types.ts

@@ -2,11 +2,13 @@ import type { EditorConfig as LexicalEditorConfig, SerializedEditorState } from
 import type {
   ClientField,
   DefaultCellComponentProps,
+  LabelFunction,
   RichTextAdapter,
   RichTextFieldClient,
   RichTextFieldClientProps,
   SanitizedConfig,
   ServerFieldBase,
+  StaticLabel,
 } from 'payload'
 
 import type {
@@ -25,9 +27,13 @@ export type LexicalFieldAdminProps = {
   /**
    * Changes the placeholder text in the editor if no content is present.
    */
-  placeholder?: string
+  placeholder?: LabelFunction | StaticLabel
 }
 
+export type LexicalFieldAdminClientProps = {
+  placeholder?: string
+} & Omit<LexicalFieldAdminProps, 'placeholder'>
+
 export type LexicalEditorProps = {
   admin?: LexicalFieldAdminProps
   features?:
@@ -92,7 +98,7 @@ export type FeatureClientSchemaMap = {
 }
 
 export type LexicalRichTextFieldProps = {
-  admin: LexicalFieldAdminProps
+  admin?: LexicalFieldAdminClientProps
   // clientFeatures is added through the rsc field
   clientFeatures: {
     [featureKey: string]: {