Child field

The child field allows you to embed an editable region inside of a component block preview.

See the document field for more information about component blocks.

Usage example

document: fields.document({
  label: 'Document',
  formatting: true,
  links: true,
  componentBlocks: {
    quote: component({
      preview: () => null,
      label: 'Quote',
      schema: {
        // Make the quote editable
        content: fields.child({
          kind: 'block',
          placeholder: 'Quote...',
          formatting: { inlineMarks: 'inherit', softBreaks: 'inherit' },
          links: 'inherit',
        }),
        // Make the attribution editable
        attribution: fields.child({ kind: 'inline', placeholder: 'Attribution...' }),
      },
    }),
  },
}),

You can nest component blocks within each other by setting componentBlocks: 'inherit' on the child field:

document: fields.document({
  label: 'Document',
  formatting: true,
  componentBlocks: {
    sectionContainer: component({
      // A preview is needed to show the child field
      preview: ({fields}) => (
        <div style={{ padding: '1rem 0' /* styling is up to you */ }}>
          {fields.children.element}
        </div>
      ),
      label: 'Section Container',
      schema: {
        content: fields.child({
          kind: 'block',
          componentBlocks: 'inherit'
          placeholder: 'Add component blocks here...',
        }),
      },
    }),
  },
}),

Type signature

Find the latest version of this field's type signature at: https://docsmill.dev/npm/@keystatic/core@latest#/.fields.child