← 返回首页
GitHub - draft-js-plugins/draft-js-plugins: React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers · GitHub
Skip to content

Navigation Menu

Toggle navigation
Sign in
Appearance settings
Search or jump to...

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted
Cancel Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search
Appearance settings
Resetting focus
This repository was archived by the owner on Mar 18, 2026. It is now read-only.

draft-js-plugins/draft-js-plugins

 master
BranchesTags
Go to file
Code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3,930 Commits
.changeset
.changeset
 
 
.github
.github
 
 
.husky
.husky
 
 
.storybook
.storybook
 
 
interfaces
interfaces
 
 
packages
packages
 
 
scripts
scripts
 
 
stories
stories
 
 
.editorconfig
.editorconfig
 
 
.eslintignore
.eslintignore
 
 
.eslintrc.js
.eslintrc.js
 
 
.gitignore
.gitignore
 
 
.nvmrc
.nvmrc
 
 
.prettierrc.js
.prettierrc.js
 
 
CHANGELOG.md
CHANGELOG.md
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
FAQ.md
FAQ.md
 
 
HOW_TO_CREATE_A_PLUGIN.md
HOW_TO_CREATE_A_PLUGIN.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
babel.config.js
babel.config.js
 
 
jest.config.base.js
jest.config.base.js
 
 
jest.config.js
jest.config.js
 
 
jestHelper.js
jestHelper.js
 
 
package.json
package.json
 
 
rollup.config.js
rollup.config.js
 
 
tsconfig.json
tsconfig.json
 
 
yarn.lock
yarn.lock
 
 
View all files

Repository files navigation

More items

DraftJS Plugins

Deprecated: This project is no longer maintained. The underlying Draft.js editor was archived by Facebook in 2023 and is no longer receiving updates. This repository is archived and no further bug fixes or features will be released.

High quality plugins with great UX on top of DraftJS.

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkout the website!

Usage

First, install the editor with npm:

$ npm install @draft-js-plugins/editor --save

Then import the editor somewhere in your code and you're ready to go!

import Editor from '@draft-js-plugins/editor';

Documentation

@draft-js-plugins/editor

Editor

An editor component accepting plugins. see source

Props Description Required
editorState see here *
onChange see here *
plugins an array of plugins
decorators an array of custom decorators
defaultKeyBindings bool
defaultBlockRenderMap bool
all other props accepted by the DraftJS Editor except decorator see here

Usage:

import React, { Component } from 'react'; import Editor from '@draft-js-plugins/editor'; import createHashtagPlugin from '@draft-js-plugins/hashtag'; import createLinkifyPlugin from '@draft-js-plugins/linkify'; import { EditorState } from 'draft-js'; const hashtagPlugin = createHashtagPlugin(); const linkifyPlugin = createLinkifyPlugin(); const plugins = [linkifyPlugin, hashtagPlugin]; export default class UnicornEditor extends Component { state = { editorState: EditorState.createEmpty(), }; onChange = (editorState) => { this.setState({ editorState, }); }; render() { return ( <Editor editorState={this.state.editorState} onChange={this.onChange} plugins={plugins} /> ); } }

How to write a Plugin

Feel free to copy any of the existing plugins as a starting point.In this repository you can also find a Guide on how to create a plugin, including a description of the supported features. In addition you can contact @nikgraf directly in case you need help or simply open a Github Issue!

Discussion and Support

Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out our collection of frequently asked questions here: FAQ.

Development

Check out our Contribution Guide.

Learn about why Draft.js and how to use DraftJS Plugins

In this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.

License

MIT

About

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers

www.draft-js-plugins.com/

Topics

react draft-js hashtags mentions stickers draft-js-plugins

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity
Custom properties

Stars

4.1k stars

Watchers

50 watching

Forks

1k forks
Report repository

Releases 210

@draft-js-plugins/mention@5.3.0 Latest
Mar 4, 2024
+ 209 releases

Packages

 
 
 

Contributors

Languages

Footer

© 2026 GitHub, Inc.