function

defineFieldEditor

Replace a built-in field input in one application while keeping its existing Go field and saved value type.

Example

import { defineAdmin } from '@riducms/plugin/admin';
import { defineFieldEditor } from '@riducms/plugin/editor';
import { generatedAdminPlugins } from './ridu.plugins.generated';
import TitleField from './components/title-field.svelte';

export default defineAdmin({
  plugins: generatedAdminPlugins,
  fields: {
    'app:titleCounter': defineFieldEditor({
      type: 'text',
      component: TitleField
    })
  }
});

Arguments

Argument	Description
`definition`	Required object with type and component, plus `decodeConfig` only when the editor has settings supplied from Go.

Editor options

Property	Type	Description
`type`	`FieldEditorType`	Required. Match the Go field type: text, textarea, email, date, code, number, checkbox, text-list, or number-list. This determines the value your component reads and writes.
`component`	`Component<FieldEditorProps<Type, Config>>`	Required. A Svelte component receiving the matching FieldEditorProps. Use `field.value` for the current input and `field.set(...)` to change it.
`decodeConfig`	`(value: unknown) => Config`	Optional. Check settings supplied by Go `field.Component` and return a typed config prop. It must return synchronously or throw. With a decoder, Go must supply a settings object; without one, omit Go settings.

Returns

A frozen RegisteredFieldEditor. Add it to defineAdmin({ fields: { "app:name": ... } }), then select the same name in the Go field. It does not mount the component or save a value.

RegisteredFieldEditor

How it works

Import from @riducms/plugin/editor in admin/src/admin.config.ts. Register it under app:name and select it in Go with field.Component("app:name") in Admin.Editor. The name after app: starts with a letter and contains letters, numbers, or underscores.

Use this for an application-specific input, a preview beside a field, or a character counter. Use definePluginField when you need a new field type with its own Go value and validation.

A text, textarea, email, date, or code editor reads and writes strings. Number and checkbox editors use numbers and booleans. Text-list and number-list editors use string[] and number[]. Ridu knows these types, so defineFieldEditor has no decodeValue or decodeInput option.

The component receives FieldEditorProps. field.value includes unsaved edits; field.set(...) updates that value. Render Field from @riducms/plugin/editor/field for the label and errors, spread field.inputProps onto the input, and respect field.readOnly.

For per-field settings, pass one object as field.Component’s second argument and add decodeConfig. Its return value becomes config and determines Config in FieldEditorProps<Type, Config>. The decoder must check unknown data and throw for invalid settings.

The registration is checked when created. ridu check additionally verifies that the name, type, and settings agree with Go. Read the linked tutorial for TitleField and the Go field selection used by this example.

Full signature

function defineFieldEditor<const Type extends FieldEditorType, Config = undefined>(
	definition: FieldEditorDefinition<Type, Config>,
): RegisteredFieldEditor

Source packages/plugin/src/editor/index.ts:2

Related types

FieldEditorType
Field types whose inputs you can replace with a custom component. Lists contain primitive strings or numbers; the list is one field.
FieldEditorDefinition
The existing field type, Svelte component, and optional settings decoder passed to defineFieldEditor.
RegisteredFieldEditor
Registration returned by defineFieldEditor; store it in defineAdmin({ fields: ... }).
FieldEditorProps
The current value, validation messages, and tools passed to an application’s custom field input.