diff --git a/raw/fields__relationship.md b/raw/_processed/fields__relationship.md similarity index 100% rename from raw/fields__relationship.md rename to raw/_processed/fields__relationship.md diff --git a/raw/fields__rich-text.md b/raw/_processed/fields__rich-text.md similarity index 100% rename from raw/fields__rich-text.md rename to raw/_processed/fields__rich-text.md diff --git a/wiki/_master-index.md b/wiki/_master-index.md index eee2e6f..34f0167 100644 --- a/wiki/_master-index.md +++ b/wiki/_master-index.md @@ -35,7 +35,7 @@ This 3-hop pattern works for hundreds of articles without vector search. | [[wiki/reports/_index\|reports/]] | Weekly and monthly summaries — generate: `uv run python scripts/report-generator.py --weekly` | 1 | | [[wiki/infrastructure/_index\|infrastructure/]] | Server inventory: all 10 SSH hosts — optical, optical-dev, optical-prod, baic, librechat, modocmms, box-cli, aimpress, pve | 12 | | [[wiki/testing/_index\|testing/]] | Web app testing: functional, performance, security, UI types; TDD/BDD/Agile methodologies; Selenium/Cypress/Playwright/JMeter/OWASP ZAP tools | 1 | -| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 77 | +| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 78 | | [[wiki/shared-patterns/_index\|shared-patterns/]] | Oliver Agency standard library patterns: httpx, structlog, pydantic-settings, alembic — reuse before writing from scratch | 4 | | [[wiki/mistakes/_index\|mistakes/]] | Anti-patterns extracted from sessions — per-stack running lists (fastapi, react, docker, postgres, general) — injected at session start | 5 | diff --git a/wiki/payloadcms/_index.md b/wiki/payloadcms/_index.md index cc2dc8a..9d7218f 100644 --- a/wiki/payloadcms/_index.md +++ b/wiki/payloadcms/_index.md @@ -78,3 +78,4 @@ | [[wiki/payloadcms/fields-point\|Point Field]] | Geospatial coordinate field — `[lng, lat]` storage, 2dsphere index, `near`/`within`/`intersects` query operators; MongoDB + PostgreSQL only (no SQLite) | raw/fields__point.md | 2026-05-15 | | [[wiki/payloadcms/fields-radio\|Radio Field]] | Single-choice radio group — options constraint (no hyphens, GraphQL enum), horizontal/vertical layout, enumName for Postgres, custom components | raw/fields__radio.md | 2026-05-15 | | [[wiki/payloadcms/fields-relationship\|Relationship Field]] | Link documents across collections — has-one/has-many, polymorphic (`{ relationTo, value }`), filterOptions, bi-directional via Join, depth auto-populate | raw/fields__relationship.md | 2026-05-15 | +| [[wiki/payloadcms/fields-rich-text\|Rich Text Field]] | WYSIWYG field stored as JSON, Lexical-powered, `editor` option for full customization, virtual/hidden/localized support | raw/fields__rich-text.md | 2026-05-15 | diff --git a/wiki/payloadcms/fields-rich-text.md b/wiki/payloadcms/fields-rich-text.md new file mode 100644 index 0000000..f85929d --- /dev/null +++ b/wiki/payloadcms/fields-rich-text.md @@ -0,0 +1,91 @@ +--- +title: "Rich Text Field" +aliases: [rich-text-field, payload-rich-text-field] +tags: [payloadcms, fields, rich-text, lexical, content] +sources: [raw/fields__rich-text.md] +created: 2026-05-15 +updated: 2026-05-15 +--- + +## Overview + +The Rich Text field gives editors a WYSIWYG interface inside the Admin Panel. Content is stored as **JSON** in the database and converted to HTML (or any format) at render time. + +Payload's philosophy: learn the underlying open-source editor (Lexical), not Payload-specific APIs — knowledge transfers elsewhere. + +## Config Options + +| Option | Required | Description | +|--------|----------|-------------| +| `name` | ✅ | DB property name | +| `label` | | Admin Panel label (string or i18n object) | +| `validate` | | Custom validation — runs on client and server | +| `saveToJWT` | | Include value in user JWT (auth collections only) | +| `hooks` | | Field-level hooks | +| `access` | | Field-level access control | +| `hidden` | | Hide from APIs and Admin Panel (still saved to DB) | +| `defaultValue` | | Default JSON content | +| `localized` | | Enable per-locale content | +| `required` | | Field must have a value | +| `admin` | | Admin Panel config (see below) | +| `editor` | | Override or customize the rich text editor | +| `custom` | | Extension point for plugin data | +| `typescriptSchema` | | Override generated TS type with JSON schema | +| `virtual` | | `true` = no DB column; or path string for virtual relationship | + +## Admin Options + +Inherits all base [[wiki/payloadcms/fields-overview|Field Admin Config]] options (`condition`, `disabled`, `components`, etc.). + +```ts +import type { Field } from 'payload' + +export const MyRichTextField: Field = { + name: 'content', + type: 'richText', + admin: { + // standard admin options here + }, +} +``` + +Further customization (custom toolbar elements, nodes, features) is done via editor-specific options — see [[wiki/payloadcms/rich-text|Rich Text (Lexical) overview]]. + +## Storage Format + +- Stored as **JSON** (not HTML string) — renderer-agnostic +- Serialise to HTML on the frontend with `@payloadcms/richtext-lexical/react` or custom serializers +- JSON structure follows Lexical's EditorState format + +## Editor Customization + +The `editor` option accepts a configured Lexical editor instance: + +```ts +import { lexicalEditor } from '@payloadcms/richtext-lexical' + +{ + name: 'content', + type: 'richText', + editor: lexicalEditor({ + features: ({ defaultFeatures }) => [...defaultFeatures], + }), +} +``` + +Full feature list (headings, links, lists, blocks, inline code, etc.) documented in [[wiki/payloadcms/rich-text|Rich Text (Lexical)]]. + +## Key Takeaways + +- **JSON storage** — not HTML; serialization happens at render time +- **`editor` option** unlocks full Lexical customization (features, nodes, toolbar) +- **`hidden: true`** still persists to DB, just invisible from APIs and Admin +- **`virtual: true`** skips DB column entirely — useful for computed/derived content +- **`saveToJWT`** embeds the field value in the user JWT — typically avoid for large rich text values +- **Localized** works at field level — one locale per `richText` field instance +- Underlying engine is **Lexical** (by Meta) — invest learning there, not Payload wrappers + +## Sources + +- `raw/fields__rich-text.md` (compiled 2026-05-15) +- https://payloadcms.com/docs/fields/rich-text