Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/withspectrum/draft-js-prism-plugin
Add syntax highlighting support to your DraftJS editor
https://github.com/withspectrum/draft-js-prism-plugin
draft-js draft-js-plugins draftjs draftjs-plugins prism prismjs syntax-highlighting
Last synced: 3 months ago
JSON representation
Add syntax highlighting support to your DraftJS editor
- Host: GitHub
- URL: https://github.com/withspectrum/draft-js-prism-plugin
- Owner: withspectrum
- License: mit
- Archived: true
- Created: 2017-09-21T13:39:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-07-04T14:22:07.000Z (over 3 years ago)
- Last Synced: 2024-04-25T19:01:06.779Z (7 months ago)
- Topics: draft-js, draft-js-plugins, draftjs, draftjs-plugins, prism, prismjs, syntax-highlighting
- Language: JavaScript
- Homepage:
- Size: 123 KB
- Stars: 49
- Watchers: 3
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-draft-js - Prism - Syntax highlight code blocks with Prism. (Plugins and Decorators Built for Draft.js)
README
# `draft-js-prism-plugin`
A DraftJS plugin to add syntax highlighting support to your code blocks. Use in combination with [`draft-js-plugins`](https://github.com/draft-js-plugins/draft-js-plugins).
## Usage
First, create the plugin and add it to the `plugins` array of your PluginsEditor:
```JS
import Prism from 'prismjs';
import createPrismPlugin from 'draft-js-prism-plugin';
import "prismjs/themes/prism.css"; // add prism.css to add highlightsclass MyEditor extends React.Component {
constructor(props) {
super(props);const prismPlugin = createPrismPlugin({
// It's required to provide your own instance of Prism
prism: Prism
});this.state = {
plugins: [prismPlugin]
}
}render() {
return (
)
}
}
```Now add a `language` key to the data of the code block you want to highlight:
```JS
// TODO: Somehow get a code block and its key, this is up to you
const { block, key } = getCurrentBlock();
if (block.getType() !== "code-block") return;// Replace the code block with a new one with the data.language changed to "javascript"
const data = block.getData().merge({ language: 'javascript' });
const newBlock = block.merge({ data });
const newContentState = currentContent.merge({
blockMap: blockMap.set(key, newBlock),
selectionAfter: currentSelection
})// Now that code block will be highlighted as JavaScript!
this.setState({
editorState: EditorState.push(editorState, newContentState, "change-block-data")
})
```## License
This code uses the [`draft-js-prism` decorator](https://github.com/SamyPesse/draft-js-prism) by [@SamyPesse](https://github.com/SamyPesse) and is based on code extracted from the [`draft-js-markdown-shortcuts-plugin`](https://github.com/ngs/draft-js-markdown-shortcuts-plugin) by [@ngs](https://github.com/ngs).
Licensed under the MIT License, Copyright ©️ 2017 Space Program Inc. See [LICENSE.md](LICENSE.md) for more information.