{"id":13314694,"url":"https://github.com/kontent-ai/draft-js","last_synced_at":"2025-03-10T21:30:39.813Z","repository":{"id":39176425,"uuid":"158505957","full_name":"kontent-ai/draft-js","owner":"kontent-ai","description":"A React framework for building text editors.","archived":false,"fork":true,"pushed_at":"2024-11-28T10:07:41.000Z","size":13827,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":7,"default_branch":"master-internal","last_synced_at":"2024-11-28T10:34:21.794Z","etag":null,"topics":["kontent-ai"],"latest_commit_sha":null,"homepage":"https://draftjs.org/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"facebookarchive/draft-js","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kontent-ai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null}},"created_at":"2018-11-21T07:10:33.000Z","updated_at":"2024-11-28T10:07:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kontent-ai/draft-js","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fdraft-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fdraft-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fdraft-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fdraft-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kontent-ai","download_url":"https://codeload.github.com/kontent-ai/draft-js/tar.gz/refs/heads/master-internal","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242929988,"owners_count":20208387,"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":["kontent-ai"],"created_at":"2024-07-29T18:11:53.505Z","updated_at":"2025-03-10T21:30:39.797Z","avatar_url":"https://github.com/kontent-ai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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\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\n## API Notice\n\nBefore getting started, please be aware that we recently changed the API of\nEntity storage in Draft. The latest version, `v0.10.0`, supports both the old\nand new API.  Following that up will be `v0.11.0` which will remove the old API.\nIf you are interested in helping out, or tracking the progress, please follow\n[issue 839](https://github.com/facebook/draft-js/issues/839).\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\nclass MyEditor extends React.Component {\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 ReactDOM from 'react-dom';\nimport {Editor, EditorState} from 'draft-js';\n\nfunction MyEditor() {\n  const [editorState, setEditorState] = React.useState(\n    EditorState.createEmpty()\n  );\n\n  const editor = React.useRef(null);\n\n  function focusEditor() {\n    editor.current.focus();\n  }\n\n  React.useEffect(() =\u003e {\n    focusEditor()\n  }, []);\n\n  return (\n    \u003cdiv onClick={focusEditor}\u003e\n      \u003cEditor\n        ref={editor}\n        editorState={editorState}\n        onChange={editorState =\u003e setEditorState(editorState)}\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```\nFurther examples of how Draft.js can be used are provided below.\n\n### Examples\n\nVisit http://draftjs.org/ to try out a basic rich editor example.\n\nThe repository includes a variety of different editor examples to demonstrate\nsome of the features offered by the framework.\n\nTo run the examples, first build Draft.js locally. The Draft.js build is tested\nwith Yarn v1 only. If you're using any other package manager and something doesn't\nwork, try using yarn v1:\n\n```\ngit clone https://github.com/facebook/draft-js.git\ncd draft-js\nyarn install\nyarn run build\n```\n\nthen open the example HTML files in your browser.\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## 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 actively 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fdraft-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkontent-ai%2Fdraft-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fdraft-js/lists"}