Converts content from Draft.js blocks to Markdown and vice versa.
This exists because I needed a highly customisable rich text editor which posts to an external API in Markdown. Draft.js to the rescue! Alas, it doesn't ship with any sort of import or export to or from markdown so I've written my own.
npm install draftjs-md-converter
The following inline styles are supported:
- bold
- italic
- H1 - H6
The following block syles are supported:
- ordered list
- unordered list
- block quote
The following media is supported:
- images
Use convertToRaw from the draft-js library
to convert the resulting RawDraftContentState into a draft-js ContentState.
Use convertFromRaw from the draft-js library
to get the raw RawDraftContentState to then pass into the converter.
The default Markdown dictionary is
{
BOLD: '__',
ITALIC: '*'
};
This can be extended or overridden by passing it in as a second optional argument to draftjsToMd
, e.g.
const myMdDict = {
BOLD: '**',
STRIKETHROUGH: '~~'
};
const markdown = draftjsToMd(blocks, myMdDict)
[---]
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));
}
[---]
npm test
npm run test-dev
npm run lint