vault backup: 2026-05-15 15:24:29
This commit is contained in:
Vadym Samoilenko
parent
d4b7c86963
commit
ca68b4d24a
4 changed files with 109 additions and 1 deletions
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
107
wiki/payloadcms/fields-code.md
Normal file
107
wiki/payloadcms/fields-code.md
Normal file
|
|
@ -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,
|
||||
}) => <CodeField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
|
||||
|
||||
// Client
|
||||
'use client'
|
||||
import type { CodeFieldClientComponent } from 'payload'
|
||||
export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => <CodeField {...props} />
|
||||
```
|
||||
|
||||
### Label Component
|
||||
|
||||
```tsx
|
||||
// Server
|
||||
import { FieldLabel } from '@payloadcms/ui'
|
||||
import type { CodeFieldLabelServerComponent } from 'payload'
|
||||
|
||||
export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({ clientField, path }) => (
|
||||
<FieldLabel label={clientField?.label || clientField?.name} path={path} required={clientField?.required} />
|
||||
)
|
||||
```
|
||||
|
||||
## 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
|
||||
Loading…
Add table
Reference in a new issue