Add IDE-like behaviours to code blocks in DraftJS editors
npm install draft-js-code-editor-plugindraft-js-code-editor-pluginAdd 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-plugins you can also use the lower-level draft-js-code library.
- Insert indentation on tab
- Preserve indentation of current line when pressing enter
- Remove indentation correctly with backspace
- More to come!
First, install the plugin:
``sh`
npm install --save draft-js-code-editor-plugin
Then pass it to the plugins prop of the draft-js-plugins editor:
`JS
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 (
onChange={this.onChange}
plugins={this.state.plugins}
/>
);
}
}
`
Using the 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
}),
createCodeEditorPlugin()
]
};
}
``
Licensed under the MIT License, Copyright ©️ 2017 Space Program Inc. See LICENSE.md for more information.