https://github.com/withspectrum/draft-js-code-editor-plugin
Add IDE-like behaviours to code blocks in your DraftJS editors
https://github.com/withspectrum/draft-js-code-editor-plugin
code draft-js draft-js-plugins draftjs editor
Last synced: 6 months ago
JSON representation
Add IDE-like behaviours to code blocks in your DraftJS editors
- Host: GitHub
- URL: https://github.com/withspectrum/draft-js-code-editor-plugin
- Owner: withspectrum
- License: mit
- Archived: true
- Created: 2017-09-24T16:38:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-06T10:27:06.000Z (almost 5 years ago)
- Last Synced: 2024-11-10T01:52:08.954Z (6 months ago)
- Topics: code, draft-js, draft-js-plugins, draftjs, editor
- Language: JavaScript
- Size: 203 KB
- Stars: 38
- Watchers: 3
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `draft-js-code-editor-plugin`
Add IDE-like behaviours to code blocks in your DraftJS editor. Meant to be used with [`draft-js-plugins`](https://github.com/draft-js-plugins/draft-js-plugins).
> Note: If you're not using `draft-js-plugins` you can also use the lower-level [`draft-js-code`](https://github.com/SamyPesse/draft-js-code) library.
## Functionality
- Insert indentation on tab
- Preserve indentation of current line when pressing enter
- Remove indentation correctly with backspace
- More to come!
## Usage
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 (
);
}
}
```
### 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
}),
createCodeEditorPlugin()
]
};
}
```
## License
Licensed under the MIT License, Copyright ©️ 2017 Space Program Inc. See [LICENSE.md](LICENSE.md) for more information.