import type { CollectionConfig } from 'frogbot'
export const Snippets: CollectionConfig = {
slug: 'snippets',
fields: [
{
name: 'source',
type: 'code',
required: true,
admin: {
language: 'typescript',
},
},
],
}
Config options
| Option | Type | Default | Description |
|---|---|---|---|
name | string | Required | Property name used in stored records and APIs. See field names. |
type | 'code' | Required | Selects the Code field. |
minLength | number | — | Passed to validate as an option. The built-in Code validator checks only required. |
maxLength | number | — | Passed to validate as an option. The built-in Code validator checks only required. |
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 | string 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. |
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 | — | Admin-panel 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. |
Admin options
Code fields support the standard field admin options, plus these options:| Option | Type | Default | Description |
|---|---|---|---|
language | string | 'javascript' | Monaco language identifier used for syntax highlighting. |
editorOptions | EditorProps['options'] | — | Monaco editor options, such as minimap or tabSize. |
editorProps | Partial<EditorProps> | — | Props passed to the Monaco editor component. |
const queryField = {
name: 'query',
type: 'code',
admin: {
language: 'sql',
editorOptions: {
minimap: { enabled: false },
wordWrap: 'on',
},
},
} as const
Custom components
Override the field or its label throughadmin.components. Custom components can wrap FrogBot’s default code editor.
Field
Server component
import { CodeField } from '@frogbotai/ui/admin'
import type { CodeFieldServerProps } from 'frogbot'
export const CustomCodeFieldServer = ({
clientField,
path,
permissions,
schemaPath,
}: CodeFieldServerProps) => (
<CodeField
field={clientField}
path={path}
permissions={permissions}
schemaPath={schemaPath}
/>
)
Client component
'use client'
import { CodeField } from '@frogbotai/ui/admin'
import type { CodeFieldClientProps } from 'frogbot'
export const CustomCodeFieldClient = (props: CodeFieldClientProps) => (
<CodeField {...props} />
)
Label
Server component
import { FieldLabel } from '@frogbotai/ui/admin'
import type { CodeFieldLabelServerProps } from 'frogbot'
export const CustomCodeLabelServer = ({
clientField,
path,
}: CodeFieldLabelServerProps) => (
<FieldLabel
label={clientField.label || clientField.name}
path={path}
required={clientField.required}
/>
)
Client component
'use client'
import { FieldLabel } from '@frogbotai/ui/admin'
import type { CodeFieldLabelClientProps } from 'frogbot'
export const CustomCodeLabelClient = ({ field, path }: CodeFieldLabelClientProps) => (
<FieldLabel label={field.label || field.name} path={path} required={field.required} />
)