daanishnasir / markdown-draft-js

Markdown draft js

A tool for converting Draft.js raw object to markdown, and vice-versa.

Looking for an example? There is a running example here

Basic Usage

Please note: We recommend using a polyfill (like babel-polyfill) since we're using a bunch of modern array methods.

draftToMarkdown expects a RAW Draft.js JS object.

It returns a string of markdown.

// First, import `draftToMarkdown`
import { draftToMarkdown } from 'markdown-draft-js';

var markdownString = draftToMarkdown(rawObject);

markdownToDraft expects a string containing markdown.

It returns a RAW Draft.js JS object.

// First, import `draftToMarkdown`
import { markdownToDraft } from 'markdown-draft-js';

var rawObject = markdownToDraft(markdownString);

Custom Values

In case you want to extend markdown’s functionality, you can. draftToMarkdown accepts an (optional) second options argument.

It takes two values: styleItems and entityItems. This is because of a distinction in draftjs between styles and entities. You can read more about them on Draft’s documentation.

Say I wanted to convert red text from my Draft.js editor to a span with a red colour style. Unless I write a custom method for it, the markdown parser will ignore this special style, since it’s not a normal, pre-defined style. (An example of this style item is defined in one of the Draft.js custom colours examples.)

However, I can pass in a custom renderer for the red style type, and then decide how I want it to be depicted in markdown. Since markdown parsers usually also accept HTML, in this example I’ll just have my custom renderer do a span with a red style. Here it is:

var markdownString = draftToMarkdown(rawObject, {
  styleItems: {
    red: {
      open: function () {
        return '<span style="color: red">';
      },

      close: function () {
        return '</span>';
      }
    }
  }
});

red is the value of the style key in the raw object. The open method is what precedes the actual text, and close is what succeeds it.

Here’s another example, with a mention entity type -

var markdownString = draftToMarkdown(rawObject, {
  entityItems: {
    mention: {
      open: function (entity) {
        return '<span class="mention-item" data-user-id="' + entity.data.id + '">';
      },

      close: function (entity) {
        return '</span>';
      }
    }
  }
});

Since entities can also contain additional custom information - in this case, the user’s id, an entity object is passed to the open and close methods so that you can use that information in your open/close text if you need to.

What if you wanted to go the opposite direction? markdownToDraft uses Remarkable for defining custom markdown types.

In this case, you need to write a remarkable plugin first and pass it in to markdownToDraft -

var rawDraftJSObject = markdownToDraft(markdownString, {
  remarkablePlugins: [remarkableMentionPlugin],
  blockEntities: {
    mention_open: function (item) {
      return {
        type: "mention",
        mutability: "IMMUTABLE",
        data: {
          mention: {
            id: item.id,
            name: item.name
          }
        }
      };
    }
  }
});

Since this module uses remarkable under the hood, you can also pass down options for the remarkable parser, simply add the property remarkableOptions to your options object. For example, let's say you wanted to parse html as well:

var rawDraftJSObject = markdownToDraft(markdownString, {
  remarkableOptions: {
    html: true
  }
});