draft-markup v0.1.0

draft-markup

Pipeline for using markup input (for example Markdown) with Draft-js.

Installation

$ npm i draft-markup --save

Usage

Initialize a syntax:

var DraftMarkup = require('draft-markup');
var markdown = require('draft-markup/syntaxes/markdown');

var draftMarkup = new DraftMarkup(markdown);

Markdown to ContentState

Generate a ContentState blocks list for draft-js using toRawContent:

var rawContent = draftMarkup.toRawContent('# Hello World\n\nThis is **bold**.');
var blocks = draft.convertFromRaw(rawContent);
var content = draft.ContentState.createFromBlockArray(blocks);

ContentState to Markdown

Output markdown from a ContentState using .toText:

var rawContent = draft.convertToRaw(content);
var text = draftMarkup.toText(rawContent);

Markdown Support

This module uses the rules from kramed to parse Markdown, it supports the whole syntaxes (headings, paragraphs, lists, tables, footnotes, etc). But:

• Reference links are replaced by (resolved) links
• Custom ID for headings (# My Title #{myID}) are parsed and added as an entity in the header-x block.
• Table are parsed as a block with inner entities for each rows/columns

Custom Rules

This module contains the markdown syntax, but you can write your custom set of rules or extend the existing ones.

var myRule = DraftMarkup.Rule(DraftMarkup.BLOCKS.HEADING_1)
    .regExp(/^<h1>(\S+)<\/h1>/, function(match) {
        return {
            text: match[1]
        };
    })
    .toText(function(innerText) {
        return '<h1>' + innerText+ '</h1>';
    });

Create a new syntax inherited from the markdown one:

var mySyntax = DraftMarkup.Syntax(markdown);


// Add a new rule
mySyntax.blocks.add(myRule);

//Remove a rule
mySyntax.blocks.del(DraftMarkup.BLOCKS.HEADING_1);

// Replace a rule
mySyntax.blocks.replace(myRule);

Checkout the GitBook syntax as an example of custom rules extending a syntax.