feat(richtext-lexical): add view override system for custom node rendering (#14244)

Adds support for custom view maps that allow users to override how
Lexical nodes are rendered in the editor. This enables full control over
node presentation without modifying the underlying data structure or
node class.

⚠️ **Experimental**: This API is experimental and may change in minor
releases.

## Key Features

- **Custom Node Rendering**: Override the visual presentation of any
node type (built-in or custom)
- **Per-Editor Configuration**: Each editor instance can have its own
view overrides. Each editor can toggle between multiple views, with each
view rendering nodes differently.
- **Dual Usage**: View definitions work in both the admin panel editor
and frontend JSX serialization, ensuring visual consistency

## Benefits

- **WYSIWYG Editing**: Make the admin editor look exactly like your
frontend
- **Consistent Rendering**: Single source of truth for both admin and
frontend

## Usage

Define a view map and pass it to the lexical editor:

```tsx
// views.tsx
export const myViews: LexicalEditorViewMap = {
  default: {
    // Override heading rendering with custom DOM
    heading: {
      createDOM() {
        const h2 = document.createElement('h2')
        h2.textContent = 'Custom Heading'
        return h2
      },
    },
    // Override with a React component
    horizontalRule: {
      Component: () => <div className="custom-hr">---</div>,
    },
    // Override with HTML string/function
    link: {
      html: '<a href="#">Custom Link</a>',
    },
  },
}
```

```ts
// config.ts
{
  fields: [
    {
      name: 'content',
      type: 'richText',
      editor: lexicalEditor({
        views: '/path/to/views.tsx#myViews',
      }),
    },
  ]
}
```

Author: AlessioGr

.github/workflows/e2e.config.ts

@@ -69,6 +69,11 @@ export default createE2EConfig([
   // TODO: Enable parallel mode again when ensureCompilationIsDone is extracted into a playwright hook. Otherwise,
   // it runs multiple times in parallel, for each single test, which causes the tests to fail occasionally in CI.
   { file: 'lexical__collections__LexicalListsFeature', shards: 1, parallel: false },
+  { file: 'lexical__collections__LexicalViewsFrontend', shards: 1, parallel: false },
+  { file: 'lexical__collections__LexicalViewsProvider', shards: 1, parallel: false },
+  { file: 'lexical__collections__LexicalViewsProviderDefault', shards: 1, parallel: false },
+  { file: 'lexical__collections__LexicalViewsNested', shards: 1, parallel: false },
+
   { file: 'lexical__collections__OnDemandForm', shards: 1 },
   { file: 'lexical__collections__Lexical__e2e__main', shards: 2 },
   { file: 'lexical__collections__Lexical__e2e__blocks', shards: 2 },

docs/rich-text/converting-jsx.mdx

@@ -22,6 +22,8 @@ export const MyComponent = ({ data }: { data: SerializedEditorState }) => {
 
 The `RichText` component includes built-in converters for common Lexical nodes. You can add or override converters via the `converters` prop for custom blocks, custom nodes, or any modifications you need. See the [website template](https://github.com/payloadcms/payload/blob/main/templates/website/src/components/RichText/index.tsx) for a working example.
 
+If you want to share the same node rendering logic between the admin panel and your frontend, consider using [Views](/docs/rich-text/views) instead. Views let you define a single node map that works in both contexts.
+
 <Banner type="default">
   When fetching data, ensure your `depth` setting is high enough to fully
   populate Lexical nodes such as uploads. The JSX converter requires fully

docs/rich-text/overview.mdx

@@ -309,6 +309,30 @@ You can customize the placeholder (the text that appears in the editor when it's
 }
 ```
 
+## Views
+
+Views let you define shared rendering logic for Lexical nodes that works in both the admin panel and JSX converters. You can define multiple named views (like `default`, `preview`, `debug`) and switch between them using the built-in view selector, then pass the same node maps to JSX converters for consistent rendering outside the editor.
+
+```ts
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export const Posts = {
+  slug: 'posts',
+  fields: [
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        // Import path with #exportName to specify which view map to use
+        views: './views.js#postViews',
+      }),
+    },
+  ],
+}
+```
+
+Learn more about [Views](/docs/rich-text/views).
+
 ## Detecting empty editor state
 
 When you first type into a rich text field and subsequently delete everything through the admin panel, its value changes from `null` to a JSON object containing an empty paragraph.