![](\"https://raw.githubusercontent.com/kadikraman/draftjs-md-converter/master/demo/src/logo.svg\"){kind=logo}
\nConverts rich text content between Draft.js blocks and Markdown.\n
\n\n## Reasoning and background\n\nThis 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.\n\n## Installation\n\n```sh\nnpm install draftjs-md-converter\n```\n\n## Support\n\nThe following inline styles are supported:\n\n- bold\n- italic\n- H1 - H6\n\nThe following block styles are supported:\n\n- ordered list\n- unordered list\n- block quote\n\nThe following media types are supported:\n\n- images\n- videos (with draft-js-video-plugin, parsing can be done using remark-shortcodes)\n\n## Usage\n\n### Converting from Markdown to Draft.js\n\n### `mdToDraftjs(markdown: String): RawDraftContentState`\n\nUse [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.\n\n### Custom inline styles and block styles\n\nThe default supported inline styles:\n\n```js\n{\n Strong: {\n type: 'BOLD',\n symbol: '__'\n },\n Emphasis: {\n type: 'ITALIC',\n symbol: '*'\n }\n}\n```\n\nThe default supported block styles:\n\n```js\n{\n List: 'unordered-list-item',\n Header1: 'header-one',\n Header2: 'header-two',\n Header3: 'header-three',\n Header4: 'header-four',\n Header5: 'header-five',\n Header6: 'header-six',\n CodeBlock: 'code-block',\n BlockQuote: 'blockquote'\n}\n```\n\nInline styles and block styles can be extended or overridden by passing a custom styles object as a second optional argument to `mdToDraftjs`, e.g.\n\n```js\nconst markdown = \"Some `markdown` with ~~deleted~~ text\";\n\nconst myCustomStyles = {\n inlineStyles: {\n Delete: {\n type: \"STRIKETHROUGH\",\n symbol: \"~~\",\n },\n Code: {\n type: \"CODE\",\n symbol: \"`\",\n },\n },\n blockStyles: {\n CustomBlock: \"custom-block\",\n },\n};\n\nconst content = mdToDraftjs(markdown, myCustomStyles);\n```\n\nThe keys to the `inlineStyles` object should be valid [AST node types](https://github.com/textlint/textlint/blob/master/docs/txtnode.md).\n\n### Converting from Draft.js to Markdown\n\n### `draftjsToMd(rawData: RawDraftContentState): String`\n\nUse [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.\n\n### Custom dictionaries\n\nThe default Markdown dictionary is\n\n```js\n{\n BOLD: '__',\n ITALIC: '*'\n};\n```\n\nThe inline styles can be extended or overridden by passing a custom dictionary object as a second optional argument to `draftjsToMd`, e.g.\n\n```js\nconst myMdDict = {\n BOLD: \"**\",\n STRIKETHROUGH: \"~~\",\n};\nconst markdown = draftjsToMd(blocks, myMdDict);\n```\n\n**NOTE: at this point you cannot override block styles!**\n\n## Example\n\n```js\n[---]\n\nimport { mdToDraftjs, draftjsToMd } from 'draftjs-md-converter';\nimport { EditorState, ContentState, convertToRaw, convertFromRaw } from 'draft-js';\n\n[---]\n\nconstructor(props) {\n super(props);\n\n // some default value in markdown\n const defaultValue = this.props.defaultValue;\n const rawData = mdToDraftjs(defaultValue);\n const contentState = convertFromRaw(rawData);\n const newEditorState = EditorState.createWithContent(contentState);\n\n this.state = {\n editorState: newEditorState,\n };\n this.onChange = (editorState) => {\n this.props.onChange(this.getMarkdown());\n this.setState({ editorState });\n };\n}\n\n[---]\n\ngetMarkdown() {\n const content = this.state.editorState.getCurrentContent();\n return draftjsToMd(convertToRaw(content));\n}\n\n[---]\n```\n\n## Run tests\n\n```\nnpm test\n```\n\n## Run tests with a watcher\n\n```\nnpm run test-dev\n```\n\n## Lint\n\n```\nnpm run lint\n```\n","maintainers":[{"name":"kadikraman","email":"hellokadi@gmail.com"}],"time":{"modified":"2022-06-15T23:41:36.018Z","created":"2016-04-11T13:58:45.340Z","0.0.1":"2016-04-11T13:58:45.340Z","0.0.2":"2016-04-11T14:16:46.859Z","0.0.3":"2016-04-11T15:06:55.478Z","0.0.4":"2016-04-11T15:34:55.498Z","0.0.5":"2016-04-11T17:09:54.131Z","0.0.6":"2016-04-12T15:07:58.393Z","0.0.7":"2016-04-13T15:58:44.155Z","0.0.8":"2016-04-15T13:51:28.790Z","0.0.9":"2016-04-16T22:47:19.101Z","0.0.10":"2016-04-19T13:16:54.193Z","0.0.11":"2016-04-19T16:04:07.928Z","0.0.12":"2016-04-20T16:43:48.863Z","0.0.13":"2016-06-06T13:23:21.747Z","0.0.14":"2016-06-06T14:59:31.180Z","0.1.0":"2016-11-13T13:25:19.978Z","0.1.1":"2017-03-28T09:39:06.629Z","0.1.2":"2017-04-27T08:15:11.033Z","0.1.3":"2017-05-08T19:12:30.525Z","0.1.4":"2017-05-23T08:26:08.202Z","0.1.5":"2017-08-02T09:04:32.948Z","0.1.6":"2017-11-12T18:11:41.669Z","0.1.7":"2018-03-20T18:12:19.647Z","1.0.0":"2018-04-08T17:48:28.491Z","1.1.0":"2018-06-01T15:09:39.632Z","1.1.1":"2018-07-05T15:14:52.809Z","1.1.2":"2019-02-18T15:02:28.008Z","1.2.0":"2019-06-26T10:33:07.271Z","1.3.0":"2020-01-09T09:41:29.705Z","1.4.0":"2020-02-18T22:46:10.966Z","1.4.1":"2020-09-02T18:24:19.290Z","1.4.2":"2021-01-14T11:45:29.213Z","1.5.0":"2021-02-14T11:23:11.330Z","1.5.1":"2021-02-14T13:17:19.482Z","1.5.2":"2021-11-21T18:31:40.684Z"},"homepage":"https://kadikraman.github.io/draftjs-md-converter","keywords":["Draft.js","Markdown","converter","react","rich","text","editor"],"repository":{"type":"git","url":"git+https://github.com/kadikraman/draftjs-md-converter.git"},"author":{"name":"Kadi Kraman"},"bugs":{"url":"https://github.com/kadikraman/draftjs-md-converter/issues"},"license":"MIT","readmeFilename":"readme.md","users":{"nmrshll":true}}