Markdoc field

The markdoc is an evolution of the document field using a new editor. It looks and feels similar to the document field, but has extended capabilities.

// Keystatic config
import { fields } from '@keystatic/core'

// Inside a collection...
schema: {
 richText: fields.markdoc({
  label: 'Rich text'
 })
}

Keystatic will store content and retrieve it for you using the Reader API, but you are responsible for rendering the Markdoc content.

You can use community tools or build your own.

The extension lets you use .md files instead of .mdoc for Markdoc collections or singletons:

content: fields.markdoc({
  label: 'Content',
+   extension: 'md',
  // ...
})

The markdoc field uses the new-generation and more capable content components:

richText: fields.markdoc({
 label: 'Rich text',
+  components: {
+   // Add custom components here
+  } 
})

Checkout the content components docs to learn how to create advanced editing experiences with the markdoc field.

By default, fields.markdoc will output content in a seperate file to the main data or below the main data if using format.contentField. If you want to have multiple pieces of content in the same file, you can use fields.markdoc.inline(...):

someContent: fields.markdoc.inline({
 label: 'Some content',
})

this will write content next to other fields like this instead of in a different file:

someContent: |
  # Title

  Some content

The editor can be customised to allow a range of formatting options. This is done via options.

See the type signature for MarkdocEditorOptions for the full set of options: https://docsmill.dev/npm/@keystatic/core@latest#/.fields.markdoc.MarkdocEditorOptions

The directory where images are stored can be customised in the same way as fields.image with directory and publicPath. Though unlike fields.image outside the editor where image filenames are determined by the key in the schema where the field is, filenames for images in the editor can be customised directly in the editor.

See the type signature for MarkdocEditorOptions.image for the full set of options: https://docsmill.dev/npm/@keystatic/core@latest#/.fields.markdoc.MarkdocEditorOptions

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