feat(richtext-lexical): allow overriding the default placeholder

payloadcms · Dec 31, 2024 · ce6647c · ce6647c
1 parent 5188a9b
commit ce6647c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
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,36 @@ 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
+
+### 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 = {