Socket
Socket
Sign inDemoInstall

draft-js

Package Overview
Dependencies
22
Maintainers
4
Versions
32
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    draft-js

A React framework for building text editors.


Version published
Weekly downloads
846K
decreased by-3.13%
Maintainers
4
Install size
4.27 MB
Created
Weekly downloads
 

Package description

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

Changelog

Source

0.10.5 (January 19th, 2018)

Added

  • Add support for ariaDescribedBy prop, for better a11y. (Suraj Karnati in a6af3e15)
  • Add support for ariaLabelledBy prop, for better a11y. (@jackyho112 in #1519)

Changed

  • Cause editor to break out of code block when user enters two blank lines. (Hanzhi Zhang in 548fd5d1)

Fixed

  • Preserve list indentation when copying and pasting from one Draft.js editor into another. (@GordyD in #1605)
  • Fix cannot read property 'update' of undefined error that was thrown when typing same character into selection that starts with that character. (@existentialism in #1512)
  • Fix encodeRawBlocks to handle non-contiguous entities. Entities should always be contiguous, and cover one sequential range of characters. However, in cases where entityState is corrupted to include non-contiguous entities, encodeRawBlocks would improperly process the entities in that case. (Frank Thompson in 0059dd46)
  • Updated CSS for DraftEditorPlaceholder to support multiline placeholder (Gaurav Vaish in c38b0285
  • Fix issue where typing at the end of a link caused the link to continue. (Ian Jones in d16833b3)
  • Fix regression of bug where clicking a link caused the focus to move but the selection state was not cleared, leading to a 'node not found' error. (@flarnie in 55316176)
  • Loosen Flow type definition for DraftBlockType to allow user-defined custom block types. (@mitermayer in #1480)

Readme

Source

Draft.js Build Status npm version

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.

API Notice

Before getting started, please be aware that we recently changed the API of Entity storage in Draft. The latest version, v0.10.0, supports both the old and new API. Following that up will be v0.11.0 which will remove the old API. If you are interested in helping out, or tracking the progress, please follow issue 839.

Getting Started

Currently Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.

npm install --save draft-js react react-dom

or

yarn add draft-js react react-dom

Using Draft.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

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

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

Because Draft.js supports unicode, you must have the following meta tag in the <head> </head> block of your HTML file:

<meta charset="utf-8" />

Further examples of how Draft.js can be used are provided below.

Examples

Visit http://draftjs.org/ 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.

Browser Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Chrome for Anroid
Chrome for Android
IE11, Edge [1, 2]last 2 versionslast 2 versionslast 2 versionsnot fully supported [3]not fully supported [3]

[1] May need a shim or a polyfill for some syntax used in Draft.js (docs).

[2] IME inputs have known issues in these browsers, especially Korean (docs).

[3] There are known issues with mobile browsers, especially on Android (docs).

Resources and Ecosystem

Check out this curated list of articles and open-sourced projects/utilities: Awesome Draft-JS.

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.

Keywords

FAQs

Last updated on 20 Jan 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc