{"id":21923548,"url":"https://github.com/kadikraman/draftjs-md-converter","last_synced_at":"2025-04-05T07:05:25.821Z","repository":{"id":46000943,"uuid":"55355763","full_name":"kadikraman/draftjs-md-converter","owner":"kadikraman","description":"Converts content from Draft.js blocks to Markdown and vice versa.","archived":false,"fork":false,"pushed_at":"2021-11-21T18:30:10.000Z","size":4523,"stargazers_count":146,"open_issues_count":16,"forks_count":37,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T22:46:43.674Z","etag":null,"topics":["draftjs","react"],"latest_commit_sha":null,"homepage":"https://kadikraman.github.io/draftjs-md-converter/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kadikraman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-03T16:15:06.000Z","updated_at":"2024-12-06T09:41:39.000Z","dependencies_parsed_at":"2022-07-20T06:32:34.862Z","dependency_job_id":null,"html_url":"https://github.com/kadikraman/draftjs-md-converter","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadikraman%2Fdraftjs-md-converter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadikraman%2Fdraftjs-md-converter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadikraman%2Fdraftjs-md-converter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadikraman%2Fdraftjs-md-converter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kadikraman","download_url":"https://codeload.github.com/kadikraman/draftjs-md-converter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299832,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draftjs","react"],"created_at":"2024-11-28T21:12:07.111Z","updated_at":"2025-04-05T07:05:25.786Z","avatar_url":"https://github.com/kadikraman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/draftjs-md-converter.svg)](https://badge.fury.io/js/draftjs-md-converter)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/kadikraman/draftjs-md-converter/master/demo/src/logo.svg\" width=224\u003e\u003c/p\u003e\n\u003ch2 align=\"center\"\u003eDraft.js to Markdown to Draft.js converter\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003eConverts rich text content between Draft.js blocks and Markdown.\u003c/strong\u003e\n\u003cbr\u003e\u003cbr\u003e\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) =\u003e {\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadikraman%2Fdraftjs-md-converter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkadikraman%2Fdraftjs-md-converter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadikraman%2Fdraftjs-md-converter/lists"}