Rich Text Field

The Rich Text field gives editors a formatting interface while storing content as structured JSON. You can render that data as JSX, HTML, Markdown, or plain text. FrogBot builds the editor on Lexical, an open-source editor whose concepts and node model can be reused outside FrogBot. Install the editor package and configure an editor at the root of your FrogBot config:

pnpm add @frogbotai/db-sqlite @frogbotai/richtext-lexical

import { sqliteAdapter } from '@frogbotai/db-sqlite'
import { lexicalEditor } from '@frogbotai/richtext-lexical'
import { buildConfig } from 'frogbot'

export default buildConfig({
  secret: process.env.FROGBOT_SECRET!,
  db: sqliteAdapter({
    client: {
      url: process.env.DATABASE_URL ?? 'file:./frogbot.db',
    },
  }),
  collections: [
    {
      slug: 'pages',
      fields: [
        {
          name: 'content',
          type: 'richText',
        },
      ],
    },
  ],
  editor: lexicalEditor({}),
})

Every Rich Text field needs an editor. A root editor applies to top-level fields unless a field supplies its own editor. Nested Rich Text fields need an explicit field editor.

Config options

Option	Type	Default	Description
`name`	`string`	Required	Property name used in stored records and APIs. See field names.
`type`	`'richText'`	Required	Selects the Rich Text field.
`editor`	`RichTextAdapter \| RichTextAdapterProvider`	Root `editor` (top-level fields only)	Editor for this field, such as `lexicalEditor({...})`. See Field editor.
`maxDepth`	`number`	Request depth	Maximum population depth for relationships and uploads inside the content. See depth.
`label`	`string \| Record<string, string> \| (({ i18n, t }) => string) \| false`	Generated from `name`	Label shown in the admin panel. Use an object keyed by language code for translations, or `false` to hide the label.
`required`	`boolean`	`false`	Rejects an empty value in the default validation.
`unique`	`boolean`	`false`	Creates a unique database index for the field path. See indexes.
`index`	`boolean`	`false`	Creates a database index for faster queries. `unique` already creates one.
`localized`	`boolean`	`false`	Stores one value per configured locale. Ignored without localization or inside a localized parent.
`defaultValue`	`SerializedEditorState` or `({ locale, req, user }) => value`	—	Value used when the field has no value. See default values.
`validate`	`Validate`	Built-in validator	Replaces the built-in validator. See validation. The built-in validator delegates to the editor.
`hooks`	`{ beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate }`	—	Arrays of `FieldHook` functions for each phase. See field hooks.
`access`	`{ create, read, update }`	Allowed	`FieldAccess` functions for each operation. See field access control.
`hidden`	`boolean`	`false`	Removes the field from API responses and the admin panel while keeping stored data.
`saveToJWT`	`boolean \| string`	`false`	In an auth-enabled collection, copies the value into the user’s token. A string sets the token key. See token data.
`virtual`	`boolean \| string`	`false`	`true` skips database storage; a string reads a value through a relationship path. Virtual fields are read-only in the admin panel unless `admin.readOnly` is `false`. See virtual fields.
`disableDuplicate`	`boolean`	`false`	Leaves the value out when a document is duplicated, so the copy uses `defaultValue`.
`admin`	`object`	—	Standard field admin options. See Admin options.
`custom`	`Record<string, any>`	—	Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs.
`jsonSchema`	`Array<({ jsonSchema }) => JSONSchema4>`	—	Functions that modify the JSON Schema used by type generation.

Field editor

Override the root editor for one field when it needs different features or admin settings:

import { FixedToolbarFeature, lexicalEditor } from '@frogbotai/richtext-lexical'
import type { CollectionConfig } from 'frogbot'

export const Pages: CollectionConfig = {
  slug: 'pages',
  fields: [
    {
      name: 'content',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => [
          ...defaultFeatures,
          FixedToolbarFeature(),
        ],
      }),
    },
  ],
}

See the Rich Text editor overview for feature configuration and rendering.

Admin options

The field’s admin option inherits the standard field admin settings. Editor-specific options belong inside lexicalEditor:

import { lexicalEditor } from '@frogbotai/richtext-lexical'

const contentField = {
  name: 'content',
  type: 'richText',
  editor: lexicalEditor({
    admin: {
      hideAddBlockButton: true,
      hideDraggableBlockElement: true,
      hideGutter: true,
      hideInsertParagraphAtEnd: true,
      placeholder: 'Write the page content...',
    },
  }),
}

Data shape

Rich Text values are serialized editor states. Import the data type from the package’s Lexical subpath:

import type { SerializedEditorState } from '@frogbotai/richtext-lexical/lexical'

export type PageContent = SerializedEditorState

FrogBot type generation includes the serialized root.children shape for configured Rich Text fields.

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Config options

Field editor

Admin options

Data shape

​Config options

​Field editor

​Admin options

​Data shape

Config options

Field editor

Admin options

Data shape