https://github.com/kadikraman/draftjs-md-converter
Converts content from Draft.js blocks to Markdown and vice versa.
https://github.com/kadikraman/draftjs-md-converter
draftjs react
Last synced: 12 months ago
JSON representation
Converts content from Draft.js blocks to Markdown and vice versa.
- Host: GitHub
- URL: https://github.com/kadikraman/draftjs-md-converter
- Owner: kadikraman
- License: mit
- Created: 2016-04-03T16:15:06.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2021-11-21T18:30:10.000Z (over 4 years ago)
- Last Synced: 2025-04-03T22:46:43.674Z (12 months ago)
- Topics: draftjs, react
- Language: JavaScript
- Homepage: https://kadikraman.github.io/draftjs-md-converter/
- Size: 4.31 MB
- Stars: 146
- Watchers: 2
- Forks: 37
- Open Issues: 16
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/draftjs-md-converter)
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](https://facebook.github.io/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
```sh
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](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html) 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:
```js
{
Strong: {
type: 'BOLD',
symbol: '__'
},
Emphasis: {
type: 'ITALIC',
symbol: '*'
}
}
```
The default supported block styles:
```js
{
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.
```js
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](https://github.com/textlint/textlint/blob/master/docs/txtnode.md).
### Converting from Draft.js to Markdown
### `draftjsToMd(rawData: RawDraftContentState): String`
Use [convertFromRaw](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html) from the `draft-js library` to get the raw RawDraftContentState to then pass into the converter.
### Custom dictionaries
The default Markdown dictionary is
```js
{
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.
```js
const myMdDict = {
BOLD: "**",
STRIKETHROUGH: "~~",
};
const markdown = draftjsToMd(blocks, myMdDict);
```
**NOTE: at this point you cannot override block styles!**
## Example
```js
[---]
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
```