README
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 theheader-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.