# facebookarchive/draft-js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/facebookarchive-draft-js).**

22,641 stars · 2,606 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/facebookarchive/draft-js
- Homepage: https://draftjs.org/
- awesome-repositories: https://awesome-repositories.com/repository/facebookarchive-draft-js.md

## Description

Draft-js is a framework for building customizable rich text editors within React applications. It serves as a state manager for document content and metadata, providing a system to handle text ranges, atomic blocks, and the conversion of HTML strings into structured document formats.

The framework enables the creation of interactive editing interfaces that support custom inline styling and configurable block rendering. It includes tools for managing rich media document handling, allowing the integration of non-editable content and metadata into a text stream.

The project covers a broad range of editor capabilities, including accessibility support via ARIA labels, custom keyboard event handling, and the management of clipboard and drag-and-drop operations. It also provides controls to override default browser text behaviors such as auto-correct and auto-capitalize.

## Tags

### User Interface & Experience

- [Rich Text Editors](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors.md) — Implements a comprehensive framework for building customizable rich text editors with structured document models in React.
- [Content Block Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors.md) — Enables the insertion and movement of non-editable atomic blocks of content within the document. ([source](https://github.com/facebookarchive/draft-js/blob/main/CHANGELOG.md))
- [Content Editable Proxies](https://awesome-repositories.com/f/user-interface-experience/content-editable-proxies.md) — Provides a proxy wrapper around native HTML editable elements to synchronize document state with a React view.
- [Range-Based Entity Mappings](https://awesome-repositories.com/f/user-interface-experience/range-based-entity-mappings.md) — Tracks metadata for specific text spans using decoupled start and end offsets to manage document entities.
- [Document State Management](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors/document-state-management.md) — Serves as a state manager for document content and metadata, handling text ranges and atomic blocks.
- [Text Input Managers](https://awesome-repositories.com/f/user-interface-experience/text-input-managers.md) — Provides logic for overriding default browser text behaviors and keyboard events to implement specific editing and navigation logic.
- [Structured Block Renderers](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/structured-block-renderers.md) — Allows mapping specific content block types to corresponding React components to control visual rendering. ([source](https://github.com/facebookarchive/draft-js/blob/main/CHANGELOG.md))
- [Editor Accessibility Optimizations](https://awesome-repositories.com/f/user-interface-experience/editor-accessibility-optimizations.md) — Implements ARIA labels and keyboard navigation support to ensure complex editor components are accessible to screen readers.
- [HTML Content Processing](https://awesome-repositories.com/f/user-interface-experience/html-content-processing.md) — Provides utilities for parsing raw HTML strings and integrating them into the structured document model.
- [HTML Content Processing](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing.md) — Parses raw HTML strings into a structured document format, supporting images and various link protocols. ([source](https://github.com/facebookarchive/draft-js/blob/main/CHANGELOG.md))
- [Inline Styling Systems](https://awesome-repositories.com/f/user-interface-experience/inline-styling-systems.md) — Supports applying custom visual styles to specific ranges of text through a user-defined styling function. ([source](https://github.com/facebookarchive/draft-js/blob/main/CHANGELOG.md))
- [Rich Media Document Handling](https://awesome-repositories.com/f/user-interface-experience/rich-text-editors/rich-media-document-handling.md) — Provides a system for managing atomic blocks and entity metadata to integrate images and links into the text stream.

### Web Development

- [Rich Text Editors](https://awesome-repositories.com/f/web-development/rich-text-editors.md) — Provides a comprehensive framework for building customizable, web-based rich text editors with structured document models. ([source](https://github.com/facebookarchive/draft-js#readme))
- [DOM Reconciliation Utilities](https://awesome-repositories.com/f/web-development/dom-reconciliation-utilities.md) — Implements manual DOM reconciliation to synchronize internal state with the browser DOM and prevent cursor jumps.

### Content Management & Publishing

- [Block-Based Document Models](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-architectures/block-based-document-models.md) — Implements a document model organized as a sequence of discrete blocks to separate structure from inline styling.
- [HTML to Document Parsers](https://awesome-repositories.com/f/content-management-publishing/html-to-document-parsers.md) — Includes a system for parsing HTML strings into structured document formats for use within the editor.

### Software Engineering & Architecture

- [Immutable State Utilities](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/state-logic-and-utilities/immutable-state-utilities.md) — Maintains the document state as a persistent, immutable data structure to enable efficient snapshots and undo history.
- [Document](https://awesome-repositories.com/f/software-engineering-architecture/entity-management/document.md) — Manages metadata and entities associated with specific text ranges within the document state. ([source](https://github.com/facebookarchive/draft-js/blob/main/CHANGELOG.md))
- [Keyboard Navigation Interception](https://awesome-repositories.com/f/software-engineering-architecture/event-interception/keyboard-navigation-interception.md) — Intercepts specific keyboard events and arrow key navigation to trigger custom editor behaviors. ([source](https://github.com/facebookarchive/draft-js/blob/main/CHANGELOG.md))
- [Rendering Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/rendering-pipelines.md) — Uses an architectural pipeline to map internal content state to customizable React components for visual output.