DraftJS TO Markdown
A library for converting DraftJS editor content to markdown.
This is draft to markdown library I wrote for one of my projects. I am open-sourcing it so that others can also be benefitted from my work.
Installation
npm install draftjs-to-markdown
Usage
import draftToMarkdown from 'draftjs-to-markdown';
import { convertToRaw } from 'draft-js;
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToMarkdown(contentState, hashConfig, customEntityTransform, config);
The function parameters are:
-
contentState: Its instance of RawDraftContentState
-
hashConfig: Its configuration object for hashtag, its required only if hashtags are used. If the object is not defined hashtags will be output as simple text in the markdown.
hashConfig = { trigger: '#', separator: ' ', }
Here trigger is character that marks starting of hashtag (default '#') and separator is character that separates characters (default ' '). These fields are optional.
-
customEntityTransform: Its function to render custom defined entities by user, its also optional.
-
config: Object to pass configuration options.
{ blockTypesMapping : {/* mappings */}, emptyLineBeforeBlock : true }
blockTypesMapping overrides the default markdown syntax. For example, to use an asterisk rather than a dash for unordered-list-item:
{ blockTypesMapping : { 'unordered-list-item': '* ' } }
By default only one line break is added before a block. Pass
emptyLineBeforeBlock: true
to add two line breaks before every block.editorState is instance of DraftJS EditorState.
Supported conversions
Following is the list of conversions it supports:
-
Convert block types to corresponding markdown syntax:
Block Type Markdown 1 header-one #
2 header-two ##
3 header-three ###
4 header-four ####
5 header-five #####
6 header-six ######
7 unordered-list-item -
8 ordered-list-item 1.
9 blockquote >
10 code 11 unstyled `` It performs these additional changes to text of blocks:
- replace blank space in beginning and end of block with
- replace
\n
with\s\s\n
- replace
<
with<
- replace
>
with>
- replace blank space in beginning and end of block with
-
Ordered and unordered list blocks with depths are appended with 4 blank spaces.
-
Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding markdown syntax:
**, *, __, ~~, ``, <sup>, <sub>
. -
Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
<span style="color:xyz;font-size:xx">
. (In the input JSON, inline styles should start with stringscolor
orfont-size
likecolor-red
,color-green
orfontsize-12
,fontsize-20
). -
Converts entity range of type link to :
[Link Text](Link URL)
. -
Converts hashtags to :
[hashtag](hashtag)
. -
Converts atomic entity image to image tag using entity data src for image source:
![alt text](Image Source)
. -
Converts embedded links to HTML iframe tags
<iframe ... />
. -
For block level styles like text-alignment add
<span>
withstyle
property around block content. -
Supports using function
customEntityTransform
for custom draftjs entities. If present its call to generate markdown for entity. It can take 2 parameter: -
entity
( object with { type, mutalibity, data}) -
text
text present in the block.
License
MIT.