@livechat/draft-js-markdown-plugin
v1.0.1
Published
A DraftJS plugin for supporting Markdown syntax shortcuts, fork of draft-js-markdown-shortcuts-plugin
Downloads
17
Maintainers
Readme
draft-js-markdown-plugin
A 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
by @ngs. (see why fork that plugin for more info)
Installation
npm i --save draft-js-markdown-plugin
Usage
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 (
<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()
]
}
}
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 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
by Atsushi Nagase.
See LICENSE for the full license text.