{"id":13457748,"url":"https://github.com/draft-js-plugins/draft-js-plugins","last_synced_at":"2025-05-13T15:09:07.442Z","repository":{"id":38373533,"uuid":"52595230","full_name":"draft-js-plugins/draft-js-plugins","owner":"draft-js-plugins","description":"React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers","archived":false,"fork":false,"pushed_at":"2025-04-22T06:18:51.000Z","size":25689,"stargazers_count":4097,"open_issues_count":11,"forks_count":1057,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-05-05T22:41:55.634Z","etag":null,"topics":["draft-js","draft-js-plugins","hashtags","mentions","react","stickers"],"latest_commit_sha":null,"homepage":"https://www.draft-js-plugins.com/","language":"TypeScript","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/draft-js-plugins.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-02-26T09:54:56.000Z","updated_at":"2025-04-21T14:36:47.000Z","dependencies_parsed_at":"2024-02-01T10:40:49.143Z","dependency_job_id":"10f0f670-bf6c-4118-bf5a-e0d856c94983","html_url":"https://github.com/draft-js-plugins/draft-js-plugins","commit_stats":{"total_commits":3333,"total_committers":236,"mean_commits":"14.122881355932204","dds":0.7179717971797179,"last_synced_commit":"dd296396ff3c08c3322653b252bd7c9633242782"},"previous_names":["nikgraf/draft-js-plugins","nikgraf/draft-js-plugin-editor"],"tags_count":210,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draft-js-plugins%2Fdraft-js-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draft-js-plugins%2Fdraft-js-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draft-js-plugins%2Fdraft-js-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draft-js-plugins%2Fdraft-js-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/draft-js-plugins","download_url":"https://codeload.github.com/draft-js-plugins/draft-js-plugins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253480744,"owners_count":21915249,"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":["draft-js","draft-js-plugins","hashtags","mentions","react","stickers"],"created_at":"2024-07-31T09:00:35.556Z","updated_at":"2025-05-13T15:09:07.364Z","avatar_url":"https://github.com/draft-js-plugins.png","language":"TypeScript","readme":"# DraftJS Plugins\n\n![Draft JS Plugins Logo](http://static.nikgraf.com/draft-js-plugins/draft-js-plugins.svg)\n\nHigh quality plugins with great UX on top of [DraftJS](https://github.com/facebook/draft-js).\n\n[![Build Status](https://travis-ci.org/draft-js-plugins/draft-js-plugins.svg?branch=master)](https://travis-ci.org/draft-js-plugins/draft-js-plugins)\n\n## Available Plugins (incl. Docs)\n\n- [Anchor](https://www.draft-js-plugins.com/plugin/anchor)\n- [Alignment](https://www.draft-js-plugins.com/plugin/alignment)\n- [Counter](https://www.draft-js-plugins.com/plugin/counter)\n- [Drag and Drop](https://www.draft-js-plugins.com/plugin/drag-n-drop)\n- [Divider](https://www.draft-js-plugins.com/plugin/divider)\n- [Emoji](https://www.draft-js-plugins.com/plugin/emoji)\n- [Focus](https://www.draft-js-plugins.com/plugin/focus)\n- [Hashtag](https://www.draft-js-plugins.com/plugin/hashtag)\n- [Image](https://www.draft-js-plugins.com/plugin/image)\n- [Inline Toolbar](https://www.draft-js-plugins.com/plugin/inline-toolbar)\n- [Linkify](https://www.draft-js-plugins.com/plugin/linkify)\n- [Mention](https://www.draft-js-plugins.com/plugin/mention)\n- [Resizeable](https://www.draft-js-plugins.com/plugin/resizeable)\n- [Side Toolbar](https://www.draft-js-plugins.com/plugin/side-toolbar)\n- [Static Toolbar](https://www.draft-js-plugins.com/plugin/static-toolbar)\n- [Sticker](https://www.draft-js-plugins.com/plugin/sticker)\n- [Text Alignment](https://www.draft-js-plugins.com/plugin/text-alignment)\n- [Undo](https://www.draft-js-plugins.com/plugin/undo)\n- [Video](https://www.draft-js-plugins.com/plugin/video)\n- or build your own … :)\n\n### Built by the community\n\n- [Autolist](https://github.com/icelab/draft-js-autolist-plugin) by [Max Wheeler/Icelab](https://github.com/makenosound)\n- [Block Breakout](https://github.com/icelab/draft-js-block-breakout-plugin) by [Max Wheeler/Icelab](https://github.com/makenosound)\n- [Markdown Shortcuts](https://github.com/ngs/draft-js-markdown-shortcuts-plugin/) by [Atsushi Nagase](https://github.com/ngs)\n- [Single Line](https://github.com/icelab/draft-js-single-line-plugin) by [Max Wheeler/Icelab](https://github.com/makenosound)\n- [RichButtons](https://github.com/jasonphillips/draft-js-richbuttons-plugin) by [jasonphillips](https://github.com/jasonphillips)\n- [Katex](https://github.com/letranloc/draft-js-katex-plugin) by [letranloc](https://github.com/letranloc)\n- [Mathjax](https://github.com/efloti/draft-js-mathjax-plugin) by [efloti](https://github.com/efloti)\n- [Buttons](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Color Picker](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Embed](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [EmojiPicker](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [GifPicker](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Link](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Modal](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Sidebar](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Toolbar](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)\n- [Divider](https://github.com/simsim0709/draft-js-plugins/tree/master/draft-js-divider-plugin) by [simsim0709](https://github.com/simsim0709)\n- [Code Editor](https://github.com/withspectrum/draft-js-code-editor-plugin) by [Max Stroiber/Spectrum](https://github.com/withspectrum)\n\n## Live Example \u0026 Documentation\n\nCheckout [the website](https://www.draft-js-plugins.com/)!\n\n## Usage\n\nFirst, install the editor with `npm`:\n\n```\n$ npm install @draft-js-plugins/editor --save\n```\n\nThen import the editor somewhere in your code and you're ready to go!\n\n```js\nimport Editor from '@draft-js-plugins/editor';\n```\n\n## Documentation\n\n### @draft-js-plugins/editor\n\n#### Editor\n\nAn editor component accepting plugins. [see source](https://github.com/draft-js-plugins/draft-js-plugins/blob/73d5f504ac62ef6c9e206f053e2800b2bf99c058/packages/editor/src/Editor/index.tsx#L24)\n\n| Props                                                           |                                         Description                                          | Required |\n| --------------------------------------------------------------- | :------------------------------------------------------------------------------------------: | -------: |\n| editorState                                                     | [see here](https://draftjs.org/docs/api-reference-editor-state/#content)                     |       \\* |\n| onChange                                                        |   [see here](https://draftjs.org/docs/api-reference-editor/#onchange)                        |       \\* |\n| plugins                                                         |                                     an array of plugins                                      |          |\n| decorators                                                      |                                an array of custom decorators                                 |          |\n| defaultKeyBindings                                              |                                             bool                                             |          |\n| defaultBlockRenderMap                                           |                                             bool                                             |          |\n| all other props accepted by the DraftJS Editor except decorator |     [see here](https://draftjs.org/docs/api-reference-editor/#props)                         |          |\n\nUsage:\n\n```js\nimport React, { Component } from 'react';\nimport Editor from '@draft-js-plugins/editor';\nimport createHashtagPlugin from '@draft-js-plugins/hashtag';\nimport createLinkifyPlugin from '@draft-js-plugins/linkify';\nimport { EditorState } from 'draft-js';\n\nconst hashtagPlugin = createHashtagPlugin();\nconst linkifyPlugin = createLinkifyPlugin();\n\nconst plugins = [linkifyPlugin, hashtagPlugin];\n\nexport default class UnicornEditor extends Component {\n  state = {\n    editorState: EditorState.createEmpty(),\n  };\n\n  onChange = editorState =\u003e {\n    this.setState({\n      editorState,\n    });\n  };\n\n  render() {\n    return (\n      \u003cEditor\n        editorState={this.state.editorState}\n        onChange={this.onChange}\n        plugins={plugins}\n      /\u003e\n    );\n  }\n}\n```\n\n#### How to write a Plugin\n\nFeel free to copy any of the existing plugins as a starting point.In this repository you can also find a [Guide](https://github.com/draft-js-plugins/draft-js-plugins/blob/master/HOW_TO_CREATE_A_PLUGIN.md) on how to create a plugin, including a description of the supported features. In addition you can contact [@nikgraf](https://github.com/nikgraf) directly in case you need help or simply open a Github Issue!\n\n## Discussion and Support\n\nJoin the channel #draft-js-plugins after signing into the DraftJS [Slack organization](https://draftjs.herokuapp.com) or check out our collection of frequently asked questions here: [FAQ](https://github.com/draft-js-plugins/draft-js-plugins/blob/master/FAQ.md).\n\n## Development\n\nCheck out our [Contribution Guide](https://github.com/draft-js-plugins/draft-js-plugins/blob/master/CONTRIBUTING.md).\n\n## Learn about why Draft.js and how to use DraftJS Plugins\n\nIn this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.\n\n[\u003cimg width=\"450\" src=\"http://img.youtube.com/vi/gxNuHZXZMgs/maxresdefault.jpg\" \u003e](https://www.youtube.com/watch?v=gxNuHZXZMgs)\n\n## License\n\nMIT\n","funding_links":[],"categories":["TypeScript","JavaScript","Plugins and Decorators Built for Draft.js","react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdraft-js-plugins%2Fdraft-js-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdraft-js-plugins%2Fdraft-js-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdraft-js-plugins%2Fdraft-js-plugins/lists"}