{"id":2021964,"url":"https://facebook.github.io/draft-js","last_synced_at":"2025-03-30T02:30:52.744Z","repository":{"id":37385154,"uuid":"52113921","full_name":"facebookarchive/draft-js","owner":"facebookarchive","description":"A React framework for building text editors.","archived":true,"fork":false,"pushed_at":"2023-02-06T15:35:05.000Z","size":36831,"stargazers_count":22581,"open_issues_count":955,"forks_count":2623,"subscribers_count":324,"default_branch":"main","last_synced_at":"2025-03-28T10:02:56.359Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://draftjs.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/facebookarchive.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-02-19T20:18:26.000Z","updated_at":"2025-03-28T07:39:36.000Z","dependencies_parsed_at":"2023-07-15T02:37:38.070Z","dependency_job_id":null,"html_url":"https://github.com/facebookarchive/draft-js","commit_stats":{"total_commits":1144,"total_committers":347,"mean_commits":"3.2968299711815563","dds":0.9423076923076923,"last_synced_commit":"afdb5c3177c13fd26cb0abbdc439488f3e21b73b"},"previous_names":["facebook/draft-js"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Fdraft-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Fdraft-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Fdraft-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Fdraft-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/facebookarchive","download_url":"https://codeload.github.com/facebookarchive/draft-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246268897,"owners_count":20750183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-20T23:38:27.562Z","updated_at":"2025-03-30T02:30:52.705Z","avatar_url":"https://github.com/facebookarchive.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://draftjs.org/\"\u003e\n    \u003cimg src=\"https://draftjs.org/img/draftjs-logo.svg\" alt=\"draftjs-logo\" width=\"8%\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Draft.js\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/facebook/draft-js\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/facebook/draft-js/master.svg?style=flat\" alt=\"Build Status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://yarn.pm/draft-js\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/draft-js.svg?style=flat\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://media.giphy.com/media/XHUjaxELpc11SiRSqN/giphy.gif\" alt=\"Live Demo\" /\u003e\n\u003c/p\u003e\n\n--------------------\n## Status\n\n**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.**\n\nFor 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.\n\n--------------------\nDraft.js is a JavaScript rich text editor framework, built for React and\nbacked by an immutable model.\n\n- **Extensible and Customizable:** We provide the building blocks to enable\nthe creation of a broad variety of rich text composition experiences, from\nbasic text styles to embedded media.\n- **Declarative Rich Text:** Draft.js fits seamlessly into\n[React](http://facebook.github.io/react/) applications,\nabstracting away the details of rendering, selection, and input behavior with a\nfamiliar declarative API.\n- **Immutable Editor State:** The Draft.js model is built\nwith [immutable-js](https://facebook.github.io/immutable-js/), offering\nan API with functional state updates and aggressively leveraging data persistence\nfor scalable memory usage.\n\n[Learn how to use Draft.js in your own project.](https://draftjs.org/docs/getting-started/)\n\nDraft.js is used in production on Facebook, including status and\ncomment inputs, [Notes](https://www.facebook.com/notes/), and\n[messenger.com](https://www.messenger.com).\n\n## API Notice\n\nBefore getting started, please be aware that we recently changed the API of\nEntity storage in Draft. \n\nPreviously, 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.\n\n## Getting Started\n\n```\nnpm install --save draft-js react react-dom\n\nor\n\nyarn add draft-js react react-dom\n```\n\nDraft.js depends on React and React DOM which must also be installed.\n\n### Using Draft.js\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Editor, EditorState} from 'draft-js';\n\nfunction MyEditor() {\n\n  \n  constructor(props) {\n    super(props);\n    this.state = {editorState: EditorState.createEmpty()};\n    this.onChange = (editorState) =\u003e this.setState({editorState});\n    this.setEditor = (editor) =\u003e {\n      this.editor = editor;\n    };\n    this.focusEditor = () =\u003e {\n      if (this.editor) {\n        this.editor.focus();\n      }\n    };\n  }\n\n  componentDidMount() {\n    this.focusEditor();\n  }\n\n  render() {\n    return (\n      \u003cdiv style={styles.editor} onClick={this.focusEditor}\u003e\n        \u003cEditor\n          ref={this.setEditor}\n          editorState={this.state.editorState}\n          onChange={this.onChange}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nconst styles = {\n  editor: {\n    border: '1px solid gray',\n    minHeight: '6em'\n  }\n};\n\nReactDOM.render(\n  \u003cMyEditor /\u003e,\n  document.getElementById('container')\n);\n```\n\nSince 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.\n\n\n```js\nimport React from \"react\";\nimport { Editor, EditorState } from \"draft-js\";\nimport \"draft-js/dist/Draft.css\";\n\nexport default function MyEditor() {\n  const [editorState, setEditorState] = React.useState(() =\u003e\n    EditorState.createEmpty()\n  );\n\n  const editor = React.useRef(null);\n  function focusEditor() {\n    editor.current.focus();\n  }\n\n  return (\n    \u003cdiv\n      style={{ border: \"1px solid black\", minHeight: \"6em\", cursor: \"text\" }}\n      onClick={focusEditor}\n    \u003e\n      \u003cEditor\n        ref={editor}\n        editorState={editorState}\n        onChange={setEditorState}\n        placeholder=\"Write something!\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\n\nNote 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.\n\nBecause Draft.js supports unicode, you must have the following meta tag in the `\u003chead\u003e` `\u003c/head\u003e` block of your HTML file:\n\n```html\n\u003cmeta charset=\"utf-8\" /\u003e\n```\n\nFurther examples of how Draft.js can be used are provided in the `/examples` directory of this repo.\n\n### Building Draft.js\n\nDraft.js is built with [Yarn](https://classic.yarnpkg.com/en/) v1. Using other package managers mgiht work, but is not officially supported.\n\nTo clone and build, run:\n\n```\ngit clone https://github.com/facebook/draft-js.git\ncd draft-js\nyarn install\nyarn run build\n```\n\n### Examples\n\nTo run the examples in the `/examples` directory, first build Draft.js locally as described above. Then, open the example HTML files in your browser.\n\n## Browser Support\n\n| ![IE / Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_32x32.png) \u003cbr /\u003e IE / Edge | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_32x32.png) \u003cbr /\u003e Firefox | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_32x32.png) \u003cbr /\u003e Chrome | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_32x32.png) \u003cbr /\u003e Safari | ![iOS Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_32x32.png) \u003cbr /\u003eiOS Safari | ![Chrome for Android](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_32x32.png) \u003cbr/\u003e Chrome for Android |\n| --------- | --------- | --------- | --------- | --------- | --------- |\n| IE11, Edge [1, 2]| last 2 versions| last 2 versions| last 2 versions| not fully supported [3] | not fully supported [3]\n\n[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)).\n\n[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)).\n\n[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)).\n\n## Resources and Ecosystem\n\nCheck out this curated list of articles and open-sourced projects/utilities: [Awesome Draft-JS](https://github.com/nikgraf/awesome-draft-js).\n\n## Discussion and Support\n\nJoin our [Slack team](https://draftjs.herokuapp.com)!\n\n## Contribute\n\nWe welcome pull requests. Learn how to\n[contribute](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).\n\n## License\n\nDraft.js is [MIT licensed](https://github.com/facebook/draft-js/blob/master/LICENSE).\n\nExamples provided in this repository and in the documentation are separately\nlicensed.\n","funding_links":[],"categories":["Javascript","Editor"],"sub_categories":["React","Flip"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/facebook.github.io%2Fdraft-js","html_url":"https://awesome.ecosyste.ms/projects/facebook.github.io%2Fdraft-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/facebook.github.io%2Fdraft-js/lists"}