Markdown input

By Espen Hovlandsdal

Markdown input component and schema type.

sanity-plugin-markdown

Markdown input component and schema type for Sanity

npm version

Installing

In your Sanity studio folder, run:

sanity install markdown

Features

  • Auto-growing input area
  • Preview mode
  • Keyboard shortcuts for formatting

Basic usage

TL;DR: Just use type: 'markdown' on a field in your schema!

Long version: In your schema definitions (think schemas/blogPost.js):

export default {
  name: 'blogPost',
  title: 'Blog Post',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'body',
      title: 'Body',
      type: 'markdown',
      options: {
        minRows: 20
      }
    }
  ]
}

Options

  • editorClassName - string The class name to use for the editor.
  • minRows - number Minimum number of rows to show for the text area input (default: 10)
  • autoGrow - boolean Whether or not to automatically grow the text area on input (default: true)
  • usePreview - boolean Whether or not to use the preview functionality (default: true)
  • previewOptions - object Object of props passed to react-markdown for rendering (default: {skipHtml: true})
  • renderPreview - function React component used to render Markdown preview (default: react-markdown)
    • Looking to render full-blown HTML? You may import sanity-plugin-markdown/html-preview for a renderer that parses HTML. Be careful, input is not filtered.

Default option values

See options table. Can be retrieved programatically from the defaultOptions property on the input:

import MarkdownInput from 'sanity-plugin-markdown'

console.log(defaultOptions)

Keyboard shortcuts

Based on GitHub + Google Docs keyboard shortcuts.

Mac:

| Key | Action | | -------------------------------------------- | ------------------------- | | + + P | Toggle write/preview mode | | + B | Toggle bold | | + I | Toggle italic | | + K | Toggle link | | + + 7 | Toggle ordered list | | + + 8 | Toggle unordered list | | + + 7 | Toggle ordered list | | + + 1-5 | Toggle heading |

Window/Linux:

| Key | Action | | ---------------------------------------------- | ------------------------- | | + + P | Toggle write/preview mode | | + B | Toggle bold | | + I | Toggle italic | | + K | Toggle link | | + + 7 | Toggle ordered list | | + + 8 | Toggle unordered list | | + + 7 | Toggle ordered list | | + Alt + 1-5 | Toggle heading |

License

MIT © Espen Hovlandsdal

Other plugins by author

GraphQL Schema

Official(made by Sanity team)

Declare a Sanity schema using GraphQL SDL syntax

Espen Hovlandsdal
Go to GraphQL Schema

Mux input

Upload videos to Mux directly from the studio.

Go to Mux input

Sanipack

An opinionated, enhanced Sanity.io plugin development experience.

Espen Hovlandsdal
Go to Sanipack