{"id":13907264,"url":"https://github.com/withspectrum/draft-js-markdown-plugin","last_synced_at":"2025-09-28T21:30:36.670Z","repository":{"id":44996248,"uuid":"104383095","full_name":"withspectrum/draft-js-markdown-plugin","owner":"withspectrum","description":"An opinionated DraftJS plugin for supporting Markdown syntax shortcuts","archived":true,"fork":true,"pushed_at":"2021-08-20T23:15:35.000Z","size":5598,"stargazers_count":139,"open_issues_count":32,"forks_count":42,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-10T23:07:01.946Z","etag":null,"topics":["draft-js","draft-js-plugins","draftjs","draftjs-plugins","markdown","markdown-editor"],"latest_commit_sha":null,"homepage":"https://markdown-plugin.spectrum.chat/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"ngs/draft-js-markdown-shortcuts-plugin","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/withspectrum.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":"2017-09-21T18:18:28.000Z","updated_at":"2024-07-04T02:49:16.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/withspectrum/draft-js-markdown-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withspectrum%2Fdraft-js-markdown-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withspectrum%2Fdraft-js-markdown-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withspectrum%2Fdraft-js-markdown-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withspectrum%2Fdraft-js-markdown-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withspectrum","download_url":"https://codeload.github.com/withspectrum/draft-js-markdown-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234563129,"owners_count":18853058,"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":["draft-js","draft-js-plugins","draftjs","draftjs-plugins","markdown","markdown-editor"],"created_at":"2024-08-06T23:01:51.654Z","updated_at":"2025-09-28T21:30:31.276Z","avatar_url":"https://github.com/withspectrum.png","language":"JavaScript","readme":"draft-js-markdown-plugin\n==================================\n\n[![Build Status](https://travis-ci.org/withspectrum/draft-js-markdown-plugin.svg?branch=master)](https://travis-ci.org/withspectrum/draft-js-markdown-plugin)\n[![npm](https://img.shields.io/npm/v/draft-js-markdown-plugin.svg)][npm]\n\u003c!-- [![Coverage Status](https://coveralls.io/repos/github/withspectrum/draft-js-markdown-plugin/badge.svg?branch=master)](https://coveralls.io/github/withspectrum/draft-js-markdown-plugin?branch=master) --\u003e\n\nAn opinionated [DraftJS] plugin for supporting Markdown syntax shortcuts in DraftJS. This plugin works with [DraftJS Plugins], and is a fork of the excellent [`draft-js-markdown-shortcuts-plugin`](https://github.com/ngs/draft-js-markdown-shortcuts-plugin) by [@ngs](https://github.com/ngs). (see [why fork that plugin](#why-fork-the-markdown-shortcuts-plugin) for more info)\n\n![screen](screen.gif)\n\n[View Demo][Demo]\n\n## Installation\n\n```sh\nnpm i --save draft-js-markdown-plugin\n```\n\n## Usage\n\n```js\nimport React, { Component } from 'react';\nimport Editor from 'draft-js-plugins-editor';\nimport createMarkdownPlugin from 'draft-js-markdown-plugin';\nimport { EditorState } from 'draft-js';\n\nexport default class DemoEditor extends Component {\n\n  state = {\n    editorState: EditorState.createEmpty(),\n    plugins: [createMarkdownPlugin()]\n  };\n\n  onChange = (editorState) =\u003e {\n    this.setState({\n      editorState,\n    });\n  };\n\n  render() {\n    return (\n      \u003cEditor\n        editorState={this.state.editorState}\n        onChange={this.onChange}\n        plugins={this.state.plugins}\n      /\u003e\n    );\n  }\n}\n```\n\n### Add code block syntax highlighting\n\nUsing the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin) you can easily add syntax highlighting support to your code blocks!\n\n```JS\n// Install prismjs and draft-js-prism-plugin\nimport Prism from 'prismjs';\nimport createPrismPlugin from 'draft-js-prism-plugin';\n\nclass Editor extends Component {\n  state = {\n    plugins: [\n      // Add the Prism plugin to the plugins array \n      createPrismPlugin({\n        prism: Prism\n      }),\n      createMarkdownPlugin()\n    ]\n  }\n}\n```\n\n## Options\n\nThe `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:\n\n### `renderLanguageSelect`\n\n```js\nrenderLanguageSelect = ({\n  // Array of language options\n  options: Array\u003c{ label, value }\u003e,\n  // Callback to select an option\n  onChange: (selectedValue: string) =\u003e void,\n  // Value of selected option\n  selectedValue: string,\n  // Label of selected option\n  selectedLabel: string\n}) =\u003e React.Node\n```\n\nCode blocks render a select to switch syntax highlighting - `renderLanguageSelect` is a render function that lets you override how this is rendered. \n\n#### Example:\n\n```\nimport createMarkdownPlugin from 'draft-js-markdown-plugin';\n\nconst renderLanguageSelect = ({ options, onChange, selectedValue }) =\u003e (\n  \u003cselect value={selectedValue} onChange={onChange}\u003e\n    {options.map(({ label, value }) =\u003e (\n      \u003coption key={value} value={value}\u003e\n        {label}\n      \u003c/option\u003e\n    ))}\n  \u003c/select\u003e\n);\n\nconst markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })\n```\n\n### `languages`\n\nDictionary for languages available to code block switcher\n\n#### Example:\n\n```js\nconst languages = {\n  js: 'JavaScript'\n}\n\nconst markdownPlugin = createMarkdownPlugin({ languages })\n```\n\n### `features`\n\nA list of enabled features, by default all features are turned on.\n\n```js\nfeatures = {\n  block: Array\u003cstring\u003e,\n  inline: Array\u003cstring\u003e,\n}\n```\n\n#### Example:\n\n```js\n// this will only enable BOLD for inline and CODE\n// as well as header-one for blocks\nconst features = {\n  inline: ['BOLD'],\n  block: ['CODE', 'header-one'],\n}\nconst plugin = createMarkdownPlugin({ features })\n```\n\n*Available Inline features*:\n\n```js\n[\n  'BOLD',\n  'ITALIC',\n  'CODE',\n  'STRIKETHROUGH',\n  'LINK',\n  'IMAGE'\n]\n```\n\n*Available Block features*:\n\n```js\nimport { CHECKABLE_LIST_ITEM } from \"draft-js-checkable-list-item\"\n[\n  'CODE',\n  'header-one',\n  'header-two',\n  'header-three',\n  'header-four',\n  'header-five',\n  'header-six',\n  'ordered-list-item',\n  'unordered-list-item',\n  // CHECKABLE_LIST_ITEM is a constant from 'draft-js-checkable-list-item'\n  // see import statementabove\n  CHECKABLE_LIST_ITEM,\n  'blockquote',\n]\n```\n\n### `entityType`\n\nTo interoperate this plugin with other DraftJS plugins, i.e. [`draft-js-plugins`](https://github.com/draft-js-plugins/draft-js-plugins), you might need to customize the `LINK` and `IMAGE` entity type created by `draft-js-markdown-plugin`.\n\n#### Example:\n\n```js\nimport createMarkdownPlugin from \"draft-js-markdown-plugin\";\nimport createFocusPlugin from \"draft-js-focus-plugin\";\nimport createImagePlugin from \"draft-js-image-plugin\";\n\nconst entityType = {\n  IMAGE: \"IMAGE\",\n};\n\nconst focusPlugin = createFocusPlugin();\nconst imagePlugin = createImagePlugin({\n  decorator: focusPlugin.decorator,\n});\n// For `draft-js-image-plugin` to work, the entity type of an image must be `IMAGE`.\nconst markdownPlugin = createMarkdownPlugin({ entityType });\n\nconst editorPlugins = [focusPlugin, imagePlugin, markdownPlugin];\n```\n\n## Why fork the `markdown-shortcuts-plugin`?\n\nWriting is a core part of our app, and while the `markdown-shortcuts-plugin` is awesome and battle-tested there are a few opinionated things we wanted to do differently. Rather than bother [@ngs](https://github.com/ngs) with tons of PRs, we figured it'd be better to own that core part of our experience fully. \n\n## License\n\nLicensed under the MIT license, Copyright Ⓒ 2017 Space Program Inc. This plugin is forked from the excellent [`draft-js-markdown-shortcuts-plugin`](https://github.com/ngs/draft-js-markdown-shortcuts-plugin) by [Atsushi Nagase](https://github.com/ngs).\n\nSee [LICENSE] for the full license text.\n\n[Demo]: https://markdown-plugin.spectrum.chat/\n[DraftJS]: https://facebook.github.io/draft-js/\n[DraftJS Plugins]: https://github.com/draft-js-plugins/draft-js-plugins\n[LICENSE]: ./LICENSE\n[npm]: https://www.npmjs.com/package/draft-js-markdown-plugin\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithspectrum%2Fdraft-js-markdown-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithspectrum%2Fdraft-js-markdown-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithspectrum%2Fdraft-js-markdown-plugin/lists"}