Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://facebook.github.io/draft-js
A React framework for building text editors.
https://facebook.github.io/draft-js
Last synced: 3 days ago
JSON representation
A React framework for building text editors.
- Host: GitHub
- URL: https://facebook.github.io/draft-js
- Owner: facebookarchive
- License: mit
- Archived: true
- Created: 2016-02-19T20:18:26.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T15:35:05.000Z (over 1 year ago)
- Last Synced: 2024-10-29T12:57:55.727Z (5 days ago)
- Language: JavaScript
- Homepage: https://draftjs.org/
- Size: 35.1 MB
- Stars: 22,573
- Watchers: 326
- Forks: 2,636
- Open Issues: 955
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-web-development - **draft.js** - A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences
README
Draft.js
--------------------
## Status
**THIS PROJECT IS CURRENTLY IN MAINTENANCE MODE. It will not receive any feature updates, only critical security bug patches. On 31st December 2022 the repo will be fully archived.**
For users looking for an open source alternative, Meta have been working on migrating to a new framework, called [Lexical](https://github.com/facebook/lexical). It's still experimental, and we're working on adding migration guides, but, we believe, it provides a more performant and accessible alternative.
--------------------
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
basic text styles to embedded media.
- **Declarative Rich Text:** Draft.js fits seamlessly into
[React](http://facebook.github.io/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](https://facebook.github.io/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.](https://draftjs.org/docs/getting-started/)
Draft.js is used in production on Facebook, including status and
comment inputs, [Notes](https://www.facebook.com/notes/), and
[messenger.com](https://www.messenger.com).
## API Notice
Before getting started, please be aware that we recently changed the API of
Entity storage in Draft.
Previously, the old API was set to be removed in `v0.11.0`. Since, the plans have changed— `v0.11.0` still supports the old API and `v0.12.0` will remove it. Refer to [the docs](https://draftjs.org/docs/v0-10-api-migration) for more information and information on how to migrate.
## Getting Started
```
npm install --save draft-js react react-dom
or
yarn add draft-js react react-dom
```
Draft.js depends on React and React DOM which must also be installed.
### Using Draft.js
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
function MyEditor() {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
this.setEditor = (editor) => {
this.editor = editor;
};
this.focusEditor = () => {
if (this.editor) {
this.editor.focus();
}
};
}
componentDidMount() {
this.focusEditor();
}
render() {
return (
);
}
}
const styles = {
editor: {
border: '1px solid gray',
minHeight: '6em'
}
};
ReactDOM.render(
,
document.getElementById('container')
);
```
Since the release of React 16.8, you can use [Hooks](https://reactjs.org/docs/hooks-intro.html) as a way to work with `EditorState` without using a class.
```js
import React from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";
export default function MyEditor() {
const [editorState, setEditorState] = React.useState(() =>
EditorState.createEmpty()
);
const editor = React.useRef(null);
function focusEditor() {
editor.current.focus();
}
return (
);
}
```
Note that the editor itself is only as tall as its contents. In order to give users a visual cue, we recommend setting a border and a minimum height via the `.DraftEditor-root` CSS selector, or using a wrapper div like in the above example.
Because Draft.js supports unicode, you must have the following meta tag in the `` `` block of your HTML file:
```html
```
Further examples of how Draft.js can be used are provided in the `/examples` directory of this repo.
### Building Draft.js
Draft.js is built with [Yarn](https://classic.yarnpkg.com/en/) v1. Using other package managers mgiht work, but is not officially supported.
To clone and build, run:
```
git clone https://github.com/facebook/draft-js.git
cd draft-js
yarn install
yarn run build
```
### Examples
To run the examples in the `/examples` directory, first build Draft.js locally as described above. Then, open the example HTML files in your browser.
## Browser Support
| 
IE / Edge | 
Firefox | 
Chrome | 
Safari | 
iOS Safari | 
Chrome for Android |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE11, Edge [1, 2]| last 2 versions| last 2 versions| last 2 versions| not fully supported [3] | not fully supported [3]
[1] May need a shim or a polyfill for some syntax used in Draft.js ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#polyfills)).
[2] IME inputs have known issues in these browsers, especially Korean ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#ime-and-internet-explorer)).
[3] There are known issues with mobile browsers, especially on Android ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#mobile-not-yet-supported)).
## Resources and Ecosystem
Check out this curated list of articles and open-sourced projects/utilities: [Awesome Draft-JS](https://github.com/nikgraf/awesome-draft-js).
## Discussion and Support
Join our [Slack team](https://draftjs.herokuapp.com)!
## Contribute
We welcome pull requests. Learn how to
[contribute](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).
## License
Draft.js is [MIT licensed](https://github.com/facebook/draft-js/blob/master/LICENSE).
Examples provided in this repository and in the documentation are separately
licensed.