Add IDE-like behaviours to code blocks in your DraftJS editors
Switch branches/tags
Nothing to show
Clone or download
mxstbr Merge pull request #17 from withspectrum/depfu/update/yarn/prettier-1…
….15.3

Update prettier: 1.15.2 → 1.15.3 (patch)
Latest commit 032bc99 Dec 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
flow-typed/npm Initial commit Sep 24, 2017
src Upgrade to draft-js-code@0.3.0 Oct 23, 2017
.babelrc Initial commit Sep 24, 2017
.flowconfig Initial commit Sep 24, 2017
.gitignore Initial commit Sep 24, 2017
.npmignore Initial commit Sep 24, 2017
.prettierrc Initial commit Sep 24, 2017
.travis.yml Initial commit Sep 24, 2017
LICENSE.md Initial commit Sep 24, 2017
README.md Initial commit Sep 24, 2017
package.json Update prettier to version 1.15.3 Dec 1, 2018
yarn.lock Update prettier to version 1.15.3 Dec 1, 2018

README.md

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

License

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