draft-js-plugins/draft-js-pluginsPublic

NotificationsYou must be signed in to change notification settings
Fork1.1k
Star4.1k

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

License

MIT license

4.1k stars 1.1k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 3,926 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

Repository files navigation

DraftJS Plugins

High quality plugins with great UX on top ofDraftJS.

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkoutthe website!

Usage

First, install the editor withnpm:

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

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

importEditorfrom'@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:

importReact,{Component}from'react';importEditorfrom'@draft-js-plugins/editor';importcreateHashtagPluginfrom'@draft-js-plugins/hashtag';importcreateLinkifyPluginfrom'@draft-js-plugins/linkify';import{EditorState}from'draft-js';consthashtagPlugin=createHashtagPlugin();constlinkifyPlugin=createLinkifyPlugin();constplugins=[linkifyPlugin,hashtagPlugin];exportdefaultclassUnicornEditorextendsComponent{state={editorState:EditorState.createEmpty(),};onChange=editorState=>{this.setState({      editorState,});};render(){return(<EditoreditorState={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 aGuide 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 DraftJSSlack organization or check out our collection of frequently asked questions here:FAQ.