hungdl / draft-js-code

Collection of utilities to make code blocks edition easy in DraftJS

draft-js-code

draft-js-code is a collection of utilities to make code blocks edition easy in DraftJS. It works well with draft-js-prism.

Demo: samypesse.github.io/draft-js-code/

Features

• Insert indent when pressing TAB
• Insert new line in block with right indentation when pressing ENTER
• Remove indentation when pressing DELETE
• Pressing TAB on last line, split the block
• Exit code blocks when pressing ENTER + Command

Installation

$ npm install draft-js-code --save

API

CodeUtils.hasSelectionInBlock(editorState)

Returns true if user is editing a code block. You should call this method to encapsulate all other methods when limiting code edition behaviour to code-block.

CodeUtils.handleKeyCommand(editorState, command)

Handle key command for code blocks, returns a new EditorState or null.

CodeUtils.handleTab(e, editorState)

Handle user pressing tab, to insert indentation, it returns a new EditorState.

CodeUtils.handleReturn(e, editorState)

Handle user pressing return, to insert a new line inside the code block, it returns a new EditorState.

Usage

var React = require('react');
var ReactDOM = require('react-dom');
var Draft = require('draft-js');
var CodeUtils = require('draft-js-code');

var Editor = React.createClass({
    getInitialState: function() {
        return {
            editorState: Draft.EditorState.createEmpty()
        };
    },

    onChange: function(editorState) {
        this.setState({
            editorState: editorState
        });
    },

    handleKeyCommand: function(command) {
        var newState;

        if (CodeUtils.hasSelectionInBlock(editorState)) {
            newState = CodeUtils.handleKeyCommand(editorState, command);
        }

        if (!newState) {
            newState = Draft.RichUtils.handleKeyCommand(editorState, command);
        }

        if (newState) {
            this.onChange(newState);
            return true;
        }
        return false;
    },

    keyBindingFn: function(e) {
        var editorState = this.state.editorState;
        var command;

        if (CodeUtils.hasSelectionInBlock(editorState)) {
            command = CodeUtils.getKeyBinding(e);
        }
        if (command) {
            return command;
        }

        return Draft.getDefaultKeyBinding(e);
    },

    handleReturn: function(e) {
        var editorState = this.state.editorState;

        if (!CodeUtils.hasSelectionInBlock(editorState)) {
            return;
        }

        this.onChange(
            CodeUtils.handleReturn(e, editorState)
        );
        return true;
    },

    handleTab: function(e) {
        var editorState = this.state.editorState;

        if (!CodeUtils.hasSelectionInBlock(editorState)) {
            return;
        }

        this.onChange(
            CodeUtils.handleTab(e, editorState)
        );
    },

    render: function() {
        return <Draft.Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            keyBindingFn={this.keyBindingFn}
            handleKeyCommand={this.handleKeyCommand}
            handleReturn={this.handleReturn}
            onTab={this.handleTab}
        />;
    }
});