draft-js-code-editor-plugin's Introduction

`draft-js-code-editor-plugin`

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

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:

npm install --save draft-js-code-editor-plugin

Then pass it to the plugins prop of the draft-js-plugins editor:

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 (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        plugins={this.state.plugins}
      />
    );  
  }
}

Add code block syntax highlighting

Using the draft-js-prism-plugin you can easily add syntax highlighting support to your code blocks!

// 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()
    ]
  };
}