feat(richtext-lexical): ability to override default placeholder (#10278)

![CleanShot 2024-12-30 at 23 28 01@2x](https://github.com/user-attachments/assets/0bab3a2a-bded-440f-9bfe-cb8bf5b74e2a) ![CleanShot 2024-12-30 at 23 28 08@2x](https://github.com/user-attachments/assets/589b7be0-f662-4c4a-b66b-66f9b88ee7c6)
payloadcms · Dec 31, 2024 · 182eaa3 · 182eaa3
1 parent 943798a
commit 182eaa3
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 13 deletions.
diff --git a/docs/fields/rich-text.mdx b/docs/fields/rich-text.mdx
@@ -45,7 +45,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Rich Text Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+The customize the appearance and behavior of the Rich Text Field in the [Admin Panel](../admin/overview), you can use the `admin` option. The Rich Text Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options)
 
 ```ts
 import type { Field } from 'payload'
@@ -58,13 +58,7 @@ export const MyRichTextField: Field = {
 }
 ```
 
-The Rich Text Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options:
-
-| Property                       | Description                                                                                                                            |
-| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
-| **`placeholder`**              | Set this property to define a placeholder string for the field.                                                                         |
-| **`hideGutter`**               | Set this property to `true` to hide this field's gutter within the Admin Panel.                                                         |
-| **`rtl`**                      | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction.            |
+Further customization can be done with editor-specific options.
 
 ## Editor-specific Options
 

diff --git a/docs/rich-text/overview.mdx b/docs/rich-text/overview.mdx
@@ -8,8 +8,8 @@ keywords: lexical, rich text, editor, headless cms
 
 <Banner type="warning">
 
-  The Payload editor is based on Lexical, Meta's rich text editor. The previous default editor was 
-  based on Slate and is still supported. You can read [its documentation](/docs/rich-text/slate), 
+  The Payload editor is based on Lexical, Meta's rich text editor. The previous default editor was
+  based on Slate and is still supported. You can read [its documentation](/docs/rich-text/slate),
   or the optional [migration guide](/docs/rich-text/migration) to migrate from Slate to Lexical (recommended).
 
 </Banner>
@@ -298,3 +298,43 @@ Make sure to only use types exported from `@payloadcms/richtext-lexical`, not fr
 ### Automatic type generation
 
 Lexical does not generate the accurate type definitions for your richText fields for you yet - this will be improved in the future. Currently, it only outputs the rough shape of the editor JSON which you can enhance using type assertions.
+
+## Admin customization
+
+The Rich Text Field editor configuration has an `admin` property with the following options:
+
+| Property                       | Description                                                                                                                            |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| **`placeholder`**              | Set this property to define a placeholder string for the field.                                                                        |
+| **`hideGutter`**               | Set this property to `true` to hide this field's gutter within the Admin Panel.                                                        |
+
+### Disable the gutter
+
+You can disable the gutter (the vertical line padding between the editor and the left edge of the screen) by setting the `hideGutter` prop to `true`:
+
+```ts
+{
+  name: 'richText',
+  type: 'richText',
+  editor: lexicalEditor({
+    admin: {
+      hideGutter: true
+    },
+  }),
+}
+```
+
+### Customize the placeholder
+
+You can customize the placeholder (the text that appears in the editor when it's empty) by setting the `placeholder` prop:
+
+```ts
+{
+  name: 'richText',
+  type: 'richText',
+  editor: lexicalEditor({
+    admin: {
+      placeholder: 'Type your content here...'
+    },
+  }),
+}
diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.tsx b/packages/richtext-lexical/src/lexical/LexicalEditor.tsx
@@ -115,7 +115,7 @@ export const LexicalEditor: React.FC<
           contentEditable={
             <div className="editor-scroller">
               <div className="editor" ref={onRef} tabIndex={-1}>
-                <LexicalContentEditable />
+                <LexicalContentEditable editorConfig={editorConfig} />
               </div>
             </div>
           }

diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.tsx b/packages/richtext-lexical/src/lexical/ui/ContentEditable.tsx
@@ -6,15 +6,26 @@ import { useTranslation } from '@payloadcms/ui'
 import * as React from 'react'
 
 import './ContentEditable.scss'
+import type { SanitizedClientEditorConfig } from '../config/types.js'
 
-export function LexicalContentEditable({ className }: { className?: string }): JSX.Element {
+export function LexicalContentEditable({
+  className,
+  editorConfig,
+}: {
+  className?: string
+  editorConfig: SanitizedClientEditorConfig
+}): JSX.Element {
   const { t } = useTranslation<{}, string>()
 
   return (
     <ContentEditable
       aria-placeholder={t('lexical:general:placeholder')}
       className={className ?? 'ContentEditable__root'}
-      placeholder={<p className="editor-placeholder">{t('lexical:general:placeholder')}</p>}
+      placeholder={
+        <p className="editor-placeholder">
+          {editorConfig?.admin?.placeholder ?? t('lexical:general:placeholder')}
+        </p>
+      }
     />
   )
 }
diff --git a/packages/richtext-lexical/src/types.ts b/packages/richtext-lexical/src/types.ts
@@ -22,6 +22,10 @@ export type LexicalFieldAdminProps = {
    * Controls if the gutter (padding to the left & gray vertical line) should be hidden. @default false
    */
   hideGutter?: boolean
+  /**
+   * Changes the placeholder text in the editor if no content is present.
+   */
+  placeholder?: string
 }
 
 export type LexicalEditorProps = {