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 highlights  

class 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.