Add IDE-like behaviours to code blocks in your DraftJS editor. Meant to be used with draft-js-plugins.
Note: If you're not using
draft-js-pluginsyou can also use the lower-leveldraft-js-codelibrary.
- Insert indentation on tab
- Preserve indentation of current line when pressing enter
- Remove indentation correctly with backspace
- More to come!
First, install the plugin:
npm install --save draft-js-code-editor-plugin
Then pass it to the plugins prop of the draft-js-plugins editor:
import React, { Component } from 'react'; import Editor from 'draft-js-plugins-editor'; import createCodeEditorPlugin from 'draft-js-code-editor-plugin'; import { EditorState } from 'draft-js'; export default class DemoEditor extends Component { state = { editorState: EditorState.createEmpty(), plugins: [createCodeEditorPlugin()] }; onChange = (editorState) => { this.setState({ editorState, }); }; render() { return ( <Editor editorState={this.state.editorState} onChange={this.onChange} plugins={this.state.plugins} /> ); } }
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 }), createCodeEditorPlugin() ] }; }
Licensed under the MIT License, Copyright ©️ 2017 Space Program Inc. See LICENSE.md for more information.