Docs

Markdown Field Type

Additional attributes, defaults, and usage example for markdown fields.

Control Type
Text preview field, which triggers opening the rich markdown editor in a modal.
Stored Value

String in markdown syntax.

HTML conversion must be handled by the code, typically after retrieving content from the source.

Usage Example

Here is an example that shows a body field on a page.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
export default {
  models: {
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        { name: 'body', type: 'markdown' },
      ],
    },
  },
}

This will render a preview in the page editor.

Markdown Preview Field Control
Markdown Preview Field Control

Clicking on the preview will open the rich markdown editor in a modal, with an option to toggle between rich text and raw markdown.

Markdown Rich Text Editor Modal
Markdown Rich Text Editor Modal

Supported Typography

The following typographical styles and elements are supported:

  • Headings
  • Emphasis (strong, italic)
  • Inline code, code blocks
  • Subscript, superscript
  • Alignment (left, center, right)
  • Lists (ordered, unordered)
  • Tables with row/column controls
  • Links
  • Images

Uploaded Images

Images uploaded or selected while using the markdown editor use the default asset source.

Transforming Markdown to HTML

A markdown field explicitly stores a string in markdown syntax. It is not converted to HTML to allow for maximum flexibility to serve your codebase.

Your code should expect a markdown string and have a mechanism for converting the markdown to HTML for proper rendering.