Structured Content 101: Find out how to make your content work harder (without your team working harder) β†’

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

Categorized in