@pro-laico/richtext

Set the default editor

defaultLexical is an opinionated Lexical preset (bold/italic/headings/lists/links and a fixed + inline toolbar) tuned for Atomic Payload. Set it as the editor in your Payload config so every rich-text field in the admin uses it:

import { buildConfig } from 'payload'
import { defaultLexical } from '@pro-laico/richtext/default-lexical'

export default buildConfig({
  editor: defaultLexical,
  // ...
})

The template sets it exactly this way (editor: defaultLexical in its payload.config.ts). Want internal links to point at collections other than pages? Build the preset with the createDefaultLexical factory and pass enabledCollections:

import { createDefaultLexical } from '@pro-laico/richtext/default-lexical'

const editor = createDefaultLexical({ enabledCollections: ['pages', 'posts'] })

Add the rich-text block

RichText is a ready-made Payload block (slug RichTextChild) you can drop into any blocks field. It carries a Content tab with a required rich-text area:

import { RichText } from '@pro-laico/richtext'

const PageBlocks = {
  name: 'children',
  type: 'blocks',
  blocks: [RichText],
}

To add your own fields to the Content tab (for example a CSS class field) use the createRichTextBlock factory instead of the pre-built RichText value. Pass prependFields / appendFields (the RichTextBlockOptions type) and they're spread at the start / end of the tab:

import type { Block } from 'payload'

import { createRichTextBlock } from '@pro-laico/richtext'
import { ClassNameField } from '@pro-laico/styles'

// a className field at the top of the Content tab feeds the generated stylesheet
const RichTextWithClassName: Block = createRichTextBlock({
  prependFields: [ClassNameField({ label: 'Rich Text Atomic Classes', defaultValue: 'prose dark:prose-invert' })],
})

Render it on the frontend

The package ships RichTextChild, a React component that renders the block's serialized Lexical content as JSX (it uses @payloadcms/richtext-lexical/react under the hood and resolves internal links to their href). It's a child-block renderer: the render pipeline hands it the block (whose .richText holds the serialized state) plus a pt pass-through, so you don't pass content into it by hand.

If you're using @pro-laico/atomic, this is already wired up. RichTextChild is registered as the renderer for the RichTextChild block, so rendering a page's children through atomic's RenderChildren draws your rich text automatically:

import { RenderChildren } from '@pro-laico/atomic/children/render'

export default function Page({ page }: { page: { children: any } }) {
  return (
    <main>
      <RenderChildren blocks={page.children} />
    </main>
  )
}

The component sets no styling of its own, so reach for Tailwind's typography (prose) classes, via a class field on the block or your own wrapper, to style the output.