A DraftJS plugin for supporting Markdown syntax shortcuts, fork of draft-js-markdown-shortcuts-plugin

Usage no npm install needed!

<script type="module">
  import aizattoDraftJsMarkdownPlugin from 'https://cdn.skypack.dev/@aizatto/draft-js-markdown-plugin';



This is a fork of https://github.com/withspectrum/draft-js-markdown-plugin to get it to work with draft-js@0.11.0

There were other forks, but they changed/broke alot of other things, so I thought I'd isolate it down to only one commit.


npm i --save @aizatto/draft-js-markdown-plugin


import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor';
import createMarkdownPlugin from 'draft-js-markdown-plugin';
import { EditorState } from 'draft-js';

export default class DemoEditor extends Component {

  state = {
    editorState: EditorState.createEmpty(),
    plugins: [createMarkdownPlugin()]

  onChange = (editorState) => {

  render() {
    return (

Add code block syntax highlighting

Using the draft-js-prism-plugin you can easily add syntax highlighting support to your code blocks!

// Install prismjs and draft-js-prism-plugin
import Prism from 'prismjs';
import createPrismPlugin from 'draft-js-prism-plugin';

class Editor extends Component {
  state = {
    plugins: [
      // Add the Prism plugin to the plugins array 
        prism: Prism


The draft-js-markdown-plugin is configurable. Just pass a config object. Here are the available options:


renderLanguageSelect = ({
  // Array of language options
  options: Array<{ label, value }>,
  // Callback to select an option
  onChange: (selectedValue: string) => void,
  // Value of selected option
  selectedValue: string,
  // Label of selected option
  selectedLabel: string
}) => React.Node

Code blocks render a select to switch syntax highlighting - renderLanguageSelect is a render function that lets you override how this is rendered.


import createMarkdownPlugin from 'draft-js-markdown-plugin';

const renderLanguageSelect = ({ options, onChange, selectedValue }) => (
  <select value={selectedValue} onChange={onChange}>
    {options.map(({ label, value }) => (
      <option key={value} value={value}>

const markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })


Dictionary for languages available to code block switcher


const languages = {
  js: 'JavaScript'

const markdownPlugin = createMarkdownPlugin({ languages })


A list of enabled features, by default all features are turned on.

features = {
  block: Array<string>,
  inline: Array<string>,


// this will only enable BOLD for inline and CODE
// as well as header-one for blocks
const features = {
  inline: ['BOLD'],
  block: ['CODE', 'header-one'],
const plugin = createMarkdownPlugin({ features })

Available Inline features:


Available Block features:

import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item"
  // CHECKABLE_LIST_ITEM is a constant from 'draft-js-checkable-list-item'
  // see import statementabove


To interoperate this plugin with other DraftJS plugins, i.e. draft-js-plugins, you might need to customize the LINK and IMAGE entity type created by draft-js-markdown-plugin.


import createMarkdownPlugin from "draft-js-markdown-plugin";
import createFocusPlugin from "draft-js-focus-plugin";
import createImagePlugin from "draft-js-image-plugin";

const entityType = {

const focusPlugin = createFocusPlugin();
const imagePlugin = createImagePlugin({
  decorator: focusPlugin.decorator,
// For `draft-js-image-plugin` to work, the entity type of an image must be `IMAGE`.
const markdownPlugin = createMarkdownPlugin({ entityType });

const editorPlugins = [focusPlugin, imagePlugin, markdownPlugin];

Why fork the markdown-shortcuts-plugin?

Writing is a core part of our app, and while the markdown-shortcuts-plugin is awesome and battle-tested there are a few opinionated things we wanted to do differently. Rather than bother @ngs with tons of PRs, we figured it'd be better to own that core part of our experience fully.


Licensed under the MIT license, Copyright Ⓒ 2017 Space Program Inc. This plugin is forked from the excellent draft-js-markdown-shortcuts-plugin by Atsushi Nagase.

See LICENSE for the full license text.