Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/draft-js-plugins/draft-js-plugins

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
https://github.com/draft-js-plugins/draft-js-plugins

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

Last synced: 9 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/draft-js-plugins/draft-js-plugins
Owner: draft-js-plugins
License: mit
Created: 2016-02-26T09:54:56.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2024-10-29T06:25:37.000Z (10 days ago)
Last Synced: 2024-10-29T21:26:45.904Z (10 days ago)
Topics: draft-js, draft-js-plugins, hashtags, mentions, react, stickers
Language: TypeScript
Homepage: https://www.draft-js-plugins.com/
Size: 25 MB
Stars: 4,093
Watchers: 55
Forks: 1,058
Open Issues: 16
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome - draft-js-plugins/draft-js-plugins - React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers (TypeScript)
awesome-starts - draft-js-plugins/draft-js-plugins - React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers (TypeScript)
awesome-draft-js - Draft.js Plugins - A Plugin architecture on top of Draft.js (Plugins and Decorators Built for Draft.js)

README

        # DraftJS Plugins

![Draft JS Plugins Logo](http://static.nikgraf.com/draft-js-plugins/draft-js-plugins.svg)

High quality plugins with great UX on top of [DraftJS](https://github.com/facebook/draft-js).

[![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)

## Available Plugins (incl. Docs)

- [Anchor](https://www.draft-js-plugins.com/plugin/anchor)

- [Alignment](https://www.draft-js-plugins.com/plugin/alignment)

- [Counter](https://www.draft-js-plugins.com/plugin/counter)

- [Drag and Drop](https://www.draft-js-plugins.com/plugin/drag-n-drop)

- [Divider](https://www.draft-js-plugins.com/plugin/divider)

- [Emoji](https://www.draft-js-plugins.com/plugin/emoji)

- [Focus](https://www.draft-js-plugins.com/plugin/focus)

- [Hashtag](https://www.draft-js-plugins.com/plugin/hashtag)

- [Image](https://www.draft-js-plugins.com/plugin/image)

- [Inline Toolbar](https://www.draft-js-plugins.com/plugin/inline-toolbar)

- [Linkify](https://www.draft-js-plugins.com/plugin/linkify)

- [Mention](https://www.draft-js-plugins.com/plugin/mention)

- [Resizeable](https://www.draft-js-plugins.com/plugin/resizeable)

- [Side Toolbar](https://www.draft-js-plugins.com/plugin/side-toolbar)

- [Static Toolbar](https://www.draft-js-plugins.com/plugin/static-toolbar)

- [Sticker](https://www.draft-js-plugins.com/plugin/sticker)

- [Text Alignment](https://www.draft-js-plugins.com/plugin/text-alignment)

- [Undo](https://www.draft-js-plugins.com/plugin/undo)

- [Video](https://www.draft-js-plugins.com/plugin/video)

- or build your own … :)

### Built by the community

- [Autolist](https://github.com/icelab/draft-js-autolist-plugin) by [Max Wheeler/Icelab](https://github.com/makenosound)

- [Block Breakout](https://github.com/icelab/draft-js-block-breakout-plugin) by [Max Wheeler/Icelab](https://github.com/makenosound)

- [Markdown Shortcuts](https://github.com/ngs/draft-js-markdown-shortcuts-plugin/) by [Atsushi Nagase](https://github.com/ngs)

- [Single Line](https://github.com/icelab/draft-js-single-line-plugin) by [Max Wheeler/Icelab](https://github.com/makenosound)

- [RichButtons](https://github.com/jasonphillips/draft-js-richbuttons-plugin) by [jasonphillips](https://github.com/jasonphillips)

- [Katex](https://github.com/letranloc/draft-js-katex-plugin) by [letranloc](https://github.com/letranloc)

- [Mathjax](https://github.com/efloti/draft-js-mathjax-plugin) by [efloti](https://github.com/efloti)

- [Buttons](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Color Picker](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Embed](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [EmojiPicker](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [GifPicker](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Link](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Modal](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Sidebar](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Toolbar](https://github.com/vacenz/last-draft-js-plugins) by [StevenIseki](https://github.com/StevenIseki)

- [Divider](https://github.com/simsim0709/draft-js-plugins/tree/master/draft-js-divider-plugin) by [simsim0709](https://github.com/simsim0709)

- [Code Editor](https://github.com/withspectrum/draft-js-code-editor-plugin) by [Max Stroiber/Spectrum](https://github.com/withspectrum)

## Live Example & Documentation

Checkout [the website](https://www.draft-js-plugins.com/)!

## 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!

```js

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

```

## Documentation

### @draft-js-plugins/editor

#### Editor

An editor component accepting plugins. [see source](https://github.com/draft-js-plugins/draft-js-plugins/blob/73d5f504ac62ef6c9e206f053e2800b2bf99c058/packages/editor/src/Editor/index.tsx#L24)

| Props                                                           |                                         Description                                          | Required |

| --------------------------------------------------------------- | :------------------------------------------------------------------------------------------: | -------: |

| editorState                                                     | [see here](https://draftjs.org/docs/api-reference-editor-state/#content)                     |       \* |

| onChange                                                        |   [see here](https://draftjs.org/docs/api-reference-editor/#onchange)                        |       \* |

| 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](https://draftjs.org/docs/api-reference-editor/#props)                         |          |

Usage:

```js

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 (

      

    );

  }

}

```

#### 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](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!

## Discussion and Support

Join 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).

## Development

Check out our [Contribution Guide](https://github.com/draft-js-plugins/draft-js-plugins/blob/master/CONTRIBUTING.md).

## 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.

[](https://www.youtube.com/watch?v=gxNuHZXZMgs)

## License

MIT