[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3066":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":20,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},3066,"draft-js","facebookarchive\u002Fdraft-js","facebookarchive","A React framework for building text editors.","https:\u002F\u002Fdraftjs.org\u002F",null,"JavaScript",22641,2605,22650,797,0,3,45,"MIT License",true,false,"main",[],"2026-06-12 02:00:46","\u003Cp align=\"center\">\n  \u003Ca href=\"http:\u002F\u002Fdraftjs.org\u002F\">\n    \u003Cimg src=\"https:\u002F\u002Fdraftjs.org\u002Fimg\u002Fdraftjs-logo.svg\" alt=\"draftjs-logo\" width=\"8%\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Ch1 align=\"center\">\n  Draft.js\n\u003C\u002Fh1>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftravis-ci.org\u002Ffacebook\u002Fdraft-js\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Ftravis\u002Ffacebook\u002Fdraft-js\u002Fmaster.svg?style=flat\" alt=\"Build Status\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fyarn.pm\u002Fdraft-js\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fdraft-js.svg?style=flat\" alt=\"npm version\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FXHUjaxELpc11SiRSqN\u002Fgiphy.gif\" alt=\"Live Demo\" \u002F>\n\u003C\u002Fp>\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:\u002F\u002Fgithub.com\u002Ffacebook\u002Flexical). 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:\u002F\u002Ffacebook.github.io\u002Freact\u002F) 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:\u002F\u002Ffacebook.github.io\u002Fimmutable-js\u002F), 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:\u002F\u002Fdraftjs.org\u002Fdocs\u002Fgetting-started\u002F)\n\nDraft.js is used in production on Facebook, including status and\ncomment inputs, [Notes](https:\u002F\u002Fwww.facebook.com\u002Fnotes\u002F), and\n[messenger.com](https:\u002F\u002Fwww.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:\u002F\u002Fdraftjs.org\u002Fdocs\u002Fv0-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) => this.setState({editorState});\n    this.setEditor = (editor) => {\n      this.editor = editor;\n    };\n    this.focusEditor = () => {\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}>\n        \u003CEditor\n          ref={this.setEditor}\n          editorState={this.state.editorState}\n          onChange={this.onChange}\n        \u002F>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\nconst styles = {\n  editor: {\n    border: '1px solid gray',\n    minHeight: '6em'\n  }\n};\n\nReactDOM.render(\n  \u003CMyEditor \u002F>,\n  document.getElementById('container')\n);\n```\n\nSince the release of React 16.8, you can use [Hooks](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhooks-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\u002Fdist\u002FDraft.css\";\n\nexport default function MyEditor() {\n  const [editorState, setEditorState] = React.useState(() =>\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    >\n      \u003CEditor\n        ref={editor}\n        editorState={editorState}\n        onChange={setEditorState}\n        placeholder=\"Write something!\"\n      \u002F>\n    \u003C\u002Fdiv>\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>` `\u003C\u002Fhead>` block of your HTML file:\n\n```html\n\u003Cmeta charset=\"utf-8\" \u002F>\n```\n\nFurther examples of how Draft.js can be used are provided in the `\u002Fexamples` directory of this repo.\n\n### Building Draft.js\n\nDraft.js is built with [Yarn](https:\u002F\u002Fclassic.yarnpkg.com\u002Fen\u002F) v1. Using other package managers mgiht work, but is not officially supported.\n\nTo clone and build, run:\n\n```\ngit clone https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fdraft-js.git\ncd draft-js\nyarn install\nyarn run build\n```\n\n### Examples\n\nTo run the examples in the `\u002Fexamples` 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 \u002F Edge](https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fedge\u002Fedge_32x32.png) \u003Cbr \u002F> IE \u002F Edge | ![Firefox](https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Ffirefox\u002Ffirefox_32x32.png) \u003Cbr \u002F> Firefox | ![Chrome](https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fchrome\u002Fchrome_32x32.png) \u003Cbr \u002F> Chrome | ![Safari](https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fsafari\u002Fsafari_32x32.png) \u003Cbr \u002F> Safari | ![iOS Safari](https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fsafari-ios\u002Fsafari-ios_32x32.png) \u003Cbr \u002F>iOS Safari | ![Chrome for Android](https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fchrome\u002Fchrome_32x32.png) \u003Cbr\u002F> 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:\u002F\u002Fdraftjs.org\u002Fdocs\u002Fadvanced-topics-issues-and-pitfalls\u002F#polyfills)).\n\n[2] IME inputs have known issues in these browsers, especially Korean ([docs](https:\u002F\u002Fdraftjs.org\u002Fdocs\u002Fadvanced-topics-issues-and-pitfalls\u002F#ime-and-internet-explorer)).\n\n[3] There are known issues with mobile browsers, especially on Android ([docs](https:\u002F\u002Fdraftjs.org\u002Fdocs\u002Fadvanced-topics-issues-and-pitfalls\u002F#mobile-not-yet-supported)).\n\n## Resources and Ecosystem\n\nCheck out this curated list of articles and open-sourced projects\u002Futilities: [Awesome Draft-JS](https:\u002F\u002Fgithub.com\u002Fnikgraf\u002Fawesome-draft-js).\n\n## Discussion and Support\n\nJoin our [Slack team](https:\u002F\u002Fdraftjs.herokuapp.com)!\n\n## Contribute\n\nWe welcome pull requests. Learn how to\n[contribute](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fdraft-js\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md).\n\n## License\n\nDraft.js is [MIT licensed](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fdraft-js\u002Fblob\u002Fmaster\u002FLICENSE).\n\nExamples provided in this repository and in the documentation are separately\nlicensed.\n","Draft.js 是一个基于 React 构建富文本编辑器的框架。它提供了丰富的扩展性和自定义能力，支持从基本文本样式到嵌入媒体的各种富文本编辑体验。Draft.js 采用声明式 API，与 React 应用程序无缝集成，简化了渲染、选择和输入行为的处理，并使用 Immutable.js 来管理不可变的编辑状态，从而实现高效的功能性状态更新和数据持久化。该框架适用于需要高度可定制且性能良好的富文本编辑功能的应用场景，如社交媒体平台中的评论框、笔记应用等。尽管 Draft.js 目前处于维护模式，不再接收新特性更新，但其稳定性和成熟度使其仍然适合于现有项目或作为学习富文本编辑器构建技术的基础。",2,"2026-06-11 02:52:19","top_language"]