Markdown IDE

By Atila Fassina

Schema and Component for editing Markdown in Sanity

Sanity-Plugin-MdIDE

This is a wrapper on React SimpleMDE Editor to be used on Sanity Studio

Installation ๐Ÿ“ฆ

sanity install sanity-plugin-mdide

Usage ๐Ÿš€

Just set type markdown to the field you wish to use.

// ./schemas/post.js

export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'body',
      title: 'Body',
      type: 'markdown',
    },
  ],
}

CSS customization ๐ŸŽจ

To fit well with Sanity Studioโ€˜s design system. These variables come from part:@sanity/base/theme/variables-style.

The list of CSS custom properties:

  • --body-text
  • --component-bg
  • --hairline-color
  • --border-radius-base
  • --brand-primary
  • --brand-secondary

This also allows to easily adapt to any color pallete.

Dark mode screenshot of Sanity-Plugin-MDIDE with dark colour palette
Light mode screenshot of Sanity-Plugin-MDIDE with dark colour palette

Configuration Options ๐Ÿ”ง

Just is a very thin wrapper on top of React SimpleMDE Editor and as such, it accepts every option EasyMDE supports. On your field schema, just pass an options object.

export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'body',
      title: 'Body',
      type: 'markdown',
      options: {
        minHeight: '400px', // default is 500px
      },
    },
  ],
}

Thanks ๐Ÿ™‡โ€โ™‚๏ธ

Install command

sanity install mdide

Contributor