https://github.com/withspectrum/draft-js-markdown-plugin
An opinionated DraftJS plugin for supporting Markdown syntax shortcuts
https://github.com/withspectrum/draft-js-markdown-plugin
draft-js draft-js-plugins draftjs draftjs-plugins markdown markdown-editor
Last synced: 4 months ago
JSON representation
An opinionated DraftJS plugin for supporting Markdown syntax shortcuts
- Host: GitHub
- URL: https://github.com/withspectrum/draft-js-markdown-plugin
- Owner: withspectrum
- License: mit
- Archived: true
- Fork: true (ngs/draft-js-markdown-shortcuts-plugin)
- Created: 2017-09-21T18:18:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-20T23:15:35.000Z (almost 4 years ago)
- Last Synced: 2025-01-10T23:07:01.946Z (4 months ago)
- Topics: draft-js, draft-js-plugins, draftjs, draftjs-plugins, markdown, markdown-editor
- Language: JavaScript
- Homepage: https://markdown-plugin.spectrum.chat/
- Size: 5.34 MB
- Stars: 139
- Watchers: 4
- Forks: 42
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
draft-js-markdown-plugin
==================================
[](https://travis-ci.org/withspectrum/draft-js-markdown-plugin)
[][npm]
An 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)
[View Demo][Demo]
## Installation
```sh
npm i --save draft-js-markdown-plugin
```
## Usage
```js
import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor';
import createMarkdownPlugin from 'draft-js-markdown-plugin';
import { EditorState } from 'draft-js';
export default class DemoEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
plugins: [createMarkdownPlugin()]
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
);
}
}
```
### Add code block syntax highlighting
Using the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin) you can easily add syntax highlighting support to your code blocks!
```JS
// Install prismjs and draft-js-prism-plugin
import Prism from 'prismjs';
import createPrismPlugin from 'draft-js-prism-plugin';
class Editor extends Component {
state = {
plugins: [
// Add the Prism plugin to the plugins array
createPrismPlugin({
prism: Prism
}),
createMarkdownPlugin()
]
}
}
```
## Options
The `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:
### `renderLanguageSelect`
```js
renderLanguageSelect = ({
// Array of language options
options: Array<{ label, value }>,
// Callback to select an option
onChange: (selectedValue: string) => void,
// Value of selected option
selectedValue: string,
// Label of selected option
selectedLabel: string
}) => React.Node
```
Code blocks render a select to switch syntax highlighting - `renderLanguageSelect` is a render function that lets you override how this is rendered.
#### Example:
```
import createMarkdownPlugin from 'draft-js-markdown-plugin';
const renderLanguageSelect = ({ options, onChange, selectedValue }) => (
{options.map(({ label, value }) => (
{label}
))}
);
const markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })
```
### `languages`
Dictionary for languages available to code block switcher
#### Example:
```js
const languages = {
js: 'JavaScript'
}
const markdownPlugin = createMarkdownPlugin({ languages })
```
### `features`
A list of enabled features, by default all features are turned on.
```js
features = {
block: Array,
inline: Array,
}
```
#### Example:
```js
// this will only enable BOLD for inline and CODE
// as well as header-one for blocks
const features = {
inline: ['BOLD'],
block: ['CODE', 'header-one'],
}
const plugin = createMarkdownPlugin({ features })
```
*Available Inline features*:
```js
[
'BOLD',
'ITALIC',
'CODE',
'STRIKETHROUGH',
'LINK',
'IMAGE'
]
```
*Available Block features*:
```js
import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item"
[
'CODE',
'header-one',
'header-two',
'header-three',
'header-four',
'header-five',
'header-six',
'ordered-list-item',
'unordered-list-item',
// CHECKABLE_LIST_ITEM is a constant from 'draft-js-checkable-list-item'
// see import statementabove
CHECKABLE_LIST_ITEM,
'blockquote',
]
```
### `entityType`
To 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`.
#### Example:
```js
import createMarkdownPlugin from "draft-js-markdown-plugin";
import createFocusPlugin from "draft-js-focus-plugin";
import createImagePlugin from "draft-js-image-plugin";
const entityType = {
IMAGE: "IMAGE",
};
const focusPlugin = createFocusPlugin();
const imagePlugin = createImagePlugin({
decorator: focusPlugin.decorator,
});
// For `draft-js-image-plugin` to work, the entity type of an image must be `IMAGE`.
const markdownPlugin = createMarkdownPlugin({ entityType });
const editorPlugins = [focusPlugin, imagePlugin, markdownPlugin];
```
## Why fork the `markdown-shortcuts-plugin`?
Writing 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.
## License
Licensed 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).
See [LICENSE] for the full license text.
[Demo]: https://markdown-plugin.spectrum.chat/
[DraftJS]: https://facebook.github.io/draft-js/
[DraftJS Plugins]: https://github.com/draft-js-plugins/draft-js-plugins
[LICENSE]: ./LICENSE
[npm]: https://www.npmjs.com/package/draft-js-markdown-plugin