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.

Example usage

// 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.


Use .md files instead of .mdoc

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

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

Content components

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.


Inline

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

Type signature

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