draft-js

What is draft-js?

Draft.js is a JavaScript rich text editor framework, built for React. It provides a set of immutable models and helper functions for creating rich text editors with a high degree of customization and control over the content and behavior.

What are draft-js's main functionalities?

Creating a Basic Editor

This code demonstrates how to create a basic rich text editor using Draft.js. It initializes an empty editor state and renders the editor component.

import React from 'react';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
  }

  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

export default MyEditor;

Handling Text Formatting

This code demonstrates how to handle text formatting commands in Draft.js. It uses the `RichUtils.handleKeyCommand` method to apply formatting like bold, italic, etc., based on keyboard shortcuts.

import React from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import 'draft-js/dist/Draft.css';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
    this.handleKeyCommand = this.handleKeyCommand.bind(this);
  }

  handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      this.onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        onChange={this.onChange}
      />
    );
  }
}

export default MyEditor;

Custom Block Rendering

This code demonstrates how to implement custom block rendering in Draft.js. It defines a custom block renderer function and a custom block component to render specific types of content blocks.

import React from 'react';
import { Editor, EditorState, ContentBlock } from 'draft-js';
import 'draft-js/dist/Draft.css';

function myBlockRenderer(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'atomic') {
    return {
      component: MyCustomBlockComponent,
      editable: false,
    };
  }
}

class MyCustomBlockComponent extends React.Component {
  render() {
    return <div>My Custom Block</div>;
  }
}

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        blockRendererFn={myBlockRenderer}
      />
    );
  }
}

export default MyEditor;

Other packages similar to draft-js

slate

Slate is a completely customizable framework for building rich text editors. Unlike Draft.js, which provides a more opinionated structure, Slate offers more flexibility and control over the editor's behavior and appearance. It uses a more modern approach with a focus on immutability and functional programming.

quill

Quill is a powerful, rich text editor that provides a wide range of features out of the box. It is more feature-rich and easier to set up compared to Draft.js, but it offers less flexibility for customization and control over the editor's internals.

prosemirror

ProseMirror is a toolkit for building rich text editors with a focus on extensibility and customizability. It provides a more modular approach compared to Draft.js, allowing developers to build complex editors with custom behaviors and features.

README

Draft.js

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

• Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from simple text styles to embedded media.
• Declarative Rich Text: Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
• Immutable Editor State: The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.

Learn how to use Draft.js in your own project.

Examples

Visit https://facebook.github.io/draft-js/ to try out a simple rich editor example.

The repository includes a variety of different editor examples to demonstrate some of the features offered by the framework.

To run the examples, first build Draft.js locally:

git clone https://github.com/facebook/draft-js.git
cd draft-js
npm install
npm run build

then open the example HTML files in your browser.

Draft.js is used in production on Facebook, including status and comment inputs, Notes, and messenger.com.

Discussion and Support

Join our Slack team!

Contribute

We actively welcome pull requests. Learn how to contribute.

License

Draft.js is BSD Licensed. We also provide an additional patent grant.

Examples provided in this repository and in the documentation are separately licensed.

Changelog

0.4.0 (April 6, 2016)

Fixed

• Avoid clearing inline style override when setting block type or depth

Added

• editable field for custom block component configuration
• Default key binding support for <kbd>Ctrl</kbd>+<kbd>M</kbd> (split-block)

Changed

• Always wrap custom block components, based on block type
  • Includes data-editor, data-offset-key, data-block in block props
• Replace onPasteRawText prop with handlePastedText