README
draft-js-markdown-plugin-es6
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-plugin
. This version supports the latest Draft.js 0.11.0 and ES6.
.
Installation
npm i --save draft-js-markdown-plugin-es6
yarn add draft-js-markdown-plugin-es6
Usage
import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor';
import createMarkdownPlugin from 'draft-js-markdown-plugin-es6';
import { EditorState } from 'draft-js';
export default class DemoEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
plugins: [createMarkdownPlugin()]
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={this.state.plugins}
/>
);
}
}
Add code block syntax highlighting
Using the draft-js-prism-plugin
you can easily add syntax highlighting support to your code blocks!
// 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-es6
is configurable. Just pass a config object. Here are the available options:
renderLanguageSelect
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-es6';
const renderLanguageSelect = ({ options, onChange, selectedValue }) => (
<select value={selectedValue} onChange={onChange}>
{options.map(({ label, value }) => (
<option key={value} value={value}>
{label}
</option>
))}
</select>
);
const markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })
languages
Dictionary for languages available to code block switcher
Example:
const languages = {
js: 'JavaScript'
}
const markdownPlugin = createMarkdownPlugin({ languages })
features
A list of enabled features, by default all features are turned on.
features = {
block: Array<string>,
inline: Array<string>,
}
Example:
// 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:
[
'BOLD',
'ITALIC',
'CODE',
'STRIKETHROUGH',
'LINK',
'IMAGE'
]
Available Block features:
[
'CODE',
'header-one',
'header-two',
'header-three',
'header-four',
'header-five',
'header-six',
'ordered-list-item',
'unordered-list-item',
'blockquote',
]
entityType
To interoperate this plugin with other DraftJS plugins, i.e. draft-js-plugins
, you might need to customize the LINK
and IMAGE
entity type created by draft-js-markdown-plugin
.
Example:
import createMarkdownPlugin from "draft-js-markdown-plugin-es6";
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];
Support
Want to offer support? Add yourself above.
License
Licensed under the MIT license, Copyright â’¸ 2017 Space Program Inc.
See LICENSE for the full license text.