diff --git a/raw/fields__code.md b/raw/_processed/fields__code.md similarity index 100% rename from raw/fields__code.md rename to raw/_processed/fields__code.md diff --git a/wiki/_master-index.md b/wiki/_master-index.md index 441b1e2..4d87ffa 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 | 65 | +| [[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 | 66 | | [[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 57487cd..3aa7a4e 100644 --- a/wiki/payloadcms/_index.md +++ b/wiki/payloadcms/_index.md @@ -66,3 +66,4 @@ | [[wiki/payloadcms/fields-array\|Array Field]] | Repeating row field — config options, minRows/maxRows, localized, unique gotcha, custom RowLabel, nested arrays | raw/fields__array.md | 2026-05-15 | | [[wiki/payloadcms/fields-blocks\|Blocks Field]] | Heterogeneous array layout builder — block config, blockReferences, filterOptions, copy/paste, Lexical rendering, image guidelines | raw/fields__blocks.md | 2026-05-15 | | [[wiki/payloadcms/fields-checkbox\|Checkbox Field]] | Boolean field — config options, defaultValue, index, saveToJWT, hidden, virtual, custom components | raw/fields__checkbox.md | 2026-05-15 | +| [[wiki/payloadcms/fields-code\|Code Field]] | Monaco editor UI (VS Code engine) storing a plain string — language syntax highlighting, editorOptions, custom components | raw/fields__code.md | 2026-05-15 | diff --git a/wiki/payloadcms/fields-code.md b/wiki/payloadcms/fields-code.md new file mode 100644 index 0000000..b6893e6 --- /dev/null +++ b/wiki/payloadcms/fields-code.md @@ -0,0 +1,107 @@ +--- +title: "Code Field" +aliases: [payload-code-field, code-field-payloadcms] +tags: [payloadcms, fields, admin, monaco] +sources: [raw/fields__code.md] +created: 2026-05-15 +updated: 2026-05-15 +--- + +## Overview + +The Code Field stores a plain string in the database but renders a **Monaco editor** (VS Code's editor) in the Admin Panel — with syntax highlighting, line numbers, and language support. + +```ts +import type { Field } from 'payload' + +export const MyCodeField: Field = { + name: 'trackingCode', + type: 'code', + required: true, + admin: { + language: 'javascript', + }, +} +``` + +## Config Options + +| Option | Description | +|--------|-------------| +| `name` * | Property name in DB | +| `label` | Field label in Admin Panel | +| `unique` | DB-level unique index | +| `index` | Build DB index for faster queries | +| `minLength` / `maxLength` | String length validation | +| `validate` | Custom validation function (client + server) | +| `saveToJWT` | Include in user JWT if top-level auth field | +| `hooks` | Field-level hooks | +| `access` | Field-level access control | +| `hidden` | Hide from API and Admin; still saved to DB | +| `defaultValue` | Default string value | +| `localized` | Enable localization (requires base config) | +| `required` | Field must have a value | +| `virtual` | Disable DB column or link to relationship | +| `typescriptSchema` | Override generated TS type with JSON schema | +| `custom` | Extension point for plugins | + +## Admin Options + +Extends the base [[wiki/payloadcms/fields-basic|Field Admin Config]] with: + +| Option | Description | +|--------|-------------| +| `language` | Monaco language ID (e.g. `'javascript'`, `'css'`, `'html'`) — full list at [microsoft/monaco-editor basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) | +| `editorOptions` | Monaco `IDiffEditorConstructionOptions` — theme, fontSize, minimap, etc. | + +## Custom Components + +### Field Component + +```tsx +// Server +import { CodeField } from '@payloadcms/ui' +import type { CodeFieldServerComponent } from 'payload' + +export const CustomCodeFieldServer: CodeFieldServerComponent = ({ + clientField, path, schemaPath, permissions, +}) => + +// Client +'use client' +import type { CodeFieldClientComponent } from 'payload' +export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => +``` + +### Label Component + +```tsx +// Server +import { FieldLabel } from '@payloadcms/ui' +import type { CodeFieldLabelServerComponent } from 'payload' + +export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({ clientField, path }) => ( + +) +``` + +## Key Takeaways + +- **Stored as string** — no special DB type; `varchar`/`text` column depending on adapter +- **Monaco editor** in Admin Panel — same engine as VS Code, supports 50+ languages +- Set `admin.language` to get syntax highlighting — default is plain text +- `editorOptions` gives full Monaco control (themes, keybindings, minimap, etc.) +- Supports `minLength`/`maxLength` validation like any text field +- `hidden: true` keeps data in DB but removes it from all API responses — useful for sensitive scripts +- `saveToJWT: true` embeds the code string into the user token — use sparingly (JWT size) + +## Related + +- [[wiki/payloadcms/fields-basic|Fields: Basic]] — shared field options (index, hooks, access, virtual) +- [[wiki/payloadcms/fields-complex|Fields: Complex]] — blocks/array for structured content +- [[wiki/payloadcms/custom-components-authoring|Custom Components — Authoring Guide]] — how to swap field components +- [[wiki/payloadcms/database-indexes|Database Indexes]] — when to set `index: true` or `unique` + +## Sources + +- `raw/fields__code.md` — compiled from https://payloadcms.com/docs/fields/code