You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

draft-js-prism-plugin

Package Overview
Dependencies
225
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

draft-js-prism-plugin

Add syntax highlighting support to your DraftJS editor


Version published
Maintainers
1
Created

Readme

Source

draft-js-prism-plugin

A DraftJS plugin to add syntax highlighting support to your code blocks. Use in combination with draft-js-plugins.

Usage

First, create the plugin and add it to the plugins array of your PluginsEditor:

import Prism from 'prismjs';
import createPrismPlugin from 'draft-js-prism-plugin';

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 (
      <PluginsEditor
        plugins={this.state.plugins}
      />
    )
  }
}

Now add a language key to the data of the code block you want to highlight:

// 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 by @SamyPesse and is based on code extracted from the draft-js-markdown-shortcuts-plugin by @ngs.

Licensed under the MIT License, Copyright ©️ 2017 Space Program Inc. See LICENSE.md for more information.

FAQs

Package last updated on 21 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc