draft-js-code-custom

This is a fork of draft-js-code

Attention

It differs from the original package by slanting to work in conditions where each line is a separate CodeBlock. You must provide such conditions by yourself.

draft-js-code-custom is a collection of low-level utilities to make code block editing in DraftJS editors nicer.

It works well with draft-js-prism or draft-js-prism-plugin.

Features

• [x] Indent with TAB
• [x] Indent with TAB then several lines selected
• [x] Insert new line with correct indentation with ENTER
• [x] Remove indentation from text beginning (if needed) with backspace
• [x] Return from indentation to previous line with backspace if the context assumes this
• [x] Remove indentation with SHIFT+TAB (#6)
• [x] Remove indentation with SHIFT+TAB for several lines
• [x] Handle input of pair characters like (), [], {}, "", '', ``, etc. (#3)
• [x] Implement code block depth based on pair characters
• [x] Move cursor to the text beginning with HOME
• [x] Duplicate current line or selected block with CTRL+D
• [x] Delete line at caret with CTRL+Y

Installation

$ npm install draft-js-code-custom --save

API

import  {
  hasSelectionInBlock,
  onTab,
  handleReturn,
  handleKeyCommand,
  handleBeforeInput
} from 'draft-js-code-custom'

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.

handleKeyCommand(editorState, command)

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

onTab(e, editorState)

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

handleReturn(e, editorState)

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

handleBeforeInput(char, editorState)

Handle inserting pair of special characters, line (), "", etc. Returns a new EditorState or undefined.

Usage

import React from 'react';
import Draft from 'draft-js';
import CodeUtils from 'draft-js-code';

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: Draft.EditorState.createEmpty()
    };
  }

  onChange = (editorState) => {
    this.setState({
      editorState
    })
  }

  onBeforeInput = (chars, editorState) => {
    const newState = handleBeforeInput(chars, editorState);

    if (newState) {
      this.onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  handleKeyCommand = (command) => {
    const { editorState } = this.state;
    let newState;

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

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

    if (newState) {
      this.onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  }

  keyBindingFn = (evt) => {
    const { editorState } = this.state;
    if (!CodeUtils.hasSelectionInBlock(editorState)) return Draft.getDefaultKeyBinding(evt);

    const command = CodeUtils.getKeyBinding(evt);

    return command || Draft.getDefaultKeyBinding(evt);
  }

  handleReturn = (evt) => {
    const { editorState } = this.state;
    if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';

    this.onChange(CodeUtils.handleReturn(evt, editorState));
    return 'handled';
  }

  onTab = (evt) => {
    const { editorState } = this.state;
    if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';

    const newState = CodeUtils.onTab(evt, editorState);
    if (newState) {
      this.onChange(newState);
      return 'handled';
    }

    return 'not-handled';
  }

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