README
Draft.js to Markdown to Draft.js converter
Converts rich text content between Draft.js blocks and Markdown.
Reasoning and background
This library exists because I needed a highly customisable rich text editor which posts to an external API in Markdown. Draft.js to the rescue! It provides the editor state but, alas, doesn't ship with any sort of conversion to or from markdown. So, I've written my own.
Installation
npm install draftjs-md-converter
Support
The following inline styles are supported:
- bold
- italic
- H1 - H6
The following block styles are supported:
- ordered list
- unordered list
- block quote
The following media types are supported:
- images
- videos (with draft-js-video-plugin, parsing can be done using remark-shortcodes)
Usage
Converting from Markdown to Draft.js
mdToDraftjs(markdown: String): RawDraftContentState
Use convertToRaw from the draft-js library
to convert the resulting RawDraftContentState into a draft-js ContentState.
Custom inline styles and block styles
The default supported inline styles:
{
Strong: {
type: 'BOLD',
symbol: '__'
},
Emphasis: {
type: 'ITALIC',
symbol: '*'
}
}
The default supported block styles:
{
List: 'unordered-list-item',
Header1: 'header-one',
Header2: 'header-two',
Header3: 'header-three',
Header4: 'header-four',
Header5: 'header-five',
Header6: 'header-six',
CodeBlock: 'code-block',
BlockQuote: 'blockquote'
}
Inline styles and block styles can be extended or overridden by passing a custom styles object as a second optional argument to mdToDraftjs
, e.g.
const markdown = "Some `markdown` with ~~deleted~~ text";
const myCustomStyles = {
inlineStyles: {
Delete: {
type: "STRIKETHROUGH",
symbol: "~~",
},
Code: {
type: "CODE",
symbol: "`",
},
},
blockStyles: {
CustomBlock: "custom-block",
},
};
const content = mdToDraftjs(markdown, myCustomStyles);
The keys to the inlineStyles
object should be valid AST node types.
Converting from Draft.js to Markdown
draftjsToMd(rawData: RawDraftContentState): String
Use convertFromRaw from the draft-js library
to get the raw RawDraftContentState to then pass into the converter.
Custom dictionaries
The default Markdown dictionary is
{
BOLD: '__',
ITALIC: '*'
};
The inline styles can be extended or overridden by passing a custom dictionary object as a second optional argument to draftjsToMd
, e.g.
const myMdDict = {
BOLD: "**",
STRIKETHROUGH: "~~",
};
const markdown = draftjsToMd(blocks, myMdDict);
NOTE: at this point you cannot override block styles!
Example
[---]
import { mdToDraftjs, draftjsToMd } from 'draftjs-md-converter';
import { EditorState, ContentState, convertToRaw, convertFromRaw } from 'draft-js';
[---]
constructor(props) {
super(props);
// some default value in markdown
const defaultValue = this.props.defaultValue;
const rawData = mdToDraftjs(defaultValue);
const contentState = convertFromRaw(rawData);
const newEditorState = EditorState.createWithContent(contentState);
this.state = {
editorState: newEditorState,
};
this.onChange = (editorState) => {
this.props.onChange(this.getMarkdown());
this.setState({ editorState });
};
}
[---]
getMarkdown() {
const content = this.state.editorState.getCurrentContent();
return draftjsToMd(convertToRaw(content));
}
[---]
Run tests
npm test
Run tests with a watcher
npm run test-dev
Lint
npm run lint