DraftJS Plugins

Slack-like emojis, FB-like mentions & stickers for web apps

2 followers

Slack-like emojis, FB-like mentions & stickers for web apps

2 followers

Visit website

Slack apps

Launch tags:Web App•Emoji•Open Source

Launch Team

Serenity Notes

Maker

Hey, I'm one of the creators of DraftJS Plugins, DraftJS is the a rich-text editor framework Facebook created & used to power their comment section as well as the notes editor. Built on top of React, of course 🤓. Over the last couple weeks a team of 6 people came together with the goal to make the power of DraftJS easily available to everyone. It currently ships with 6 plugins: - Emoji (Slack-like autocomplete with consistently displayed across all platforms) - Mentions (Facebook-like @-mentions) - Stickers (Facebook-like stickers) - Hashtag support - Linkify (turns links into a-tags) - Undo/Redo We care to ship those plugins with fantastic UX and make sure they work well on mobile & desktop as well as screen-readers. Feel free to ask any questions here or reach out to us directly via Twitter DM 📭 P.S. Thanks to Jyoti, Max, Pascal, Matthew & Julian for all the good work and making this happen in such a brief period of time. 🙌🎉

Report

10yr ago

@nikgraf stickers! 😻

Report

10yr ago

@nikgraf I am curious, how you came up with this idea, and if not answered within this, why? :)

Report

10yr ago

@nikgraf Great job Nick :)

Report

10yr ago

Serenity Notes

Maker

@elisabeth_woditschka Sure! Several times in the past I was working on applications that allowed people to communicate. These were mostly commenting sections, but sometimes even live-chat. All of them were text based, but most recently we have seen a trend where applications like WeChat, Slack or Facebook enhanced their communication inputs with Emojis, Stickers and @-mentions. While I wanted to have similar features in my applications, it turned out to be hard to do with the tools we had back then. React helped me a great deal to build better user interfaces. Still building a smooth inline-editing experience was hard. To me this changed a month ago with the release of DraftJS. For the first time there was a tool I felt comfortable to build these features. Since DraftJS only comes with a set of text-editing features I started to experiment with Stickers and Hashtags. We wanted to have a modular system together. This led to the decision to build a plugin architecture. btw really looking forward to see what people are going to build with it :)

Report

10yr ago

@nikgraf this is amazing. we're going to use this in our product to draft messages. Is it possible to replace the @ mentions with # or [

Report

10yr ago

Awesome work Nik & co! I couldn't really think of any use cases when you told me about the idea some weeks ago but now I totally get it! Recently wrote my own editor with autolink/linkify functionality which is always a huge pain 😁 Looking forward to use DraftJS with some awesome plugins for my next project! 🙌

Report

10yr ago

GraphCDN

Maker

@neuling2k it's sooo nice, @nikgraf really outdid himself — both using and writing plugins is a breeze!

Report

10yr ago

Serenity Notes

Maker

@mxstbr @neuling2k wouldn't have been possible without you help as well as from the others! I really mean this. Thanks again! 🙌

Report

10yr ago

Techmate

This is awesome! Such a need for a simple rict-twxt editor that doesnt look like its from 1997 and has 48 buttons. Any requests for markdown support or code blocks from others? Might make some interesting plugins!

Report

10yr ago

Serenity Notes

Maker

@scotthasbrouck thanks a lot for the kind words 😄 There was one person in the DraftJS Community Slack who said he was interested to build a markdown plugin. Hard to tell, but we are definitely open to both ideas.

Report

10yr ago

Techmate

@nikgraf cool. I may be interested in helping. I could certainly use it with some projects i have in mind!

Report

10yr ago

Cool plugin @nikgraf and super-friends! I just started messing with react after getting hooked on Node.js, so this seems like a logical evolution and at a perfect time. With that said, sine you mention replicating similar features that WeChat, Slack and FB Messenger have, my natural next thought is BOTS! Do you have a plan in the future to integrate other plugins or capabilities like commands, webhooks and bots? Also, I haven't done my due diligence, but this seems like a natural UI layer for Twilio's new Messaging API, no?

Report

10yr ago

This is awesome! I built an app called theQuilt (http://theQuilt.meteor.com) using DraftJS with basic rich formatting and was about to implement a lot of these features, so this is going to save me a lot of time. Thanks!

Report

10yr ago

Serenity Notes

Maker

@_panw Great! Feel free to reach out to us for feedback or improvements :)

Report

10yr ago

Hypercontext

@nikgraf so glad to see this posted here. I stumble onto the repo a few weeks ago and have been silently tracking... So great to see how easy it is to solve some really common problems

Report

10yr ago

AccuNews

@nikgraf this is awesome. Can't wait to try it out lol.

Report

10yr ago

1 2

Reviews