DraftJS Plugins

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

Would you recommend this product?
No reviews yet
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. πŸ™ŒπŸŽ‰
Upvote (13)Share
@nikgraf stickers! 😻
@nikgraf I am curious, how you came up with this idea, and if not answered within this, why? :)
@nikgraf Great job Nick :)
@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 :)
@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 [
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! πŸ™Œ
@neuling2k it's sooo nice, @nikgraf really outdid himself β€” both using and writing plugins is a breeze!
@mxstbr @neuling2k wouldn't have been possible without you help as well as from the others! I really mean this. Thanks again! πŸ™Œ
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!
@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.
@nikgraf cool. I may be interested in helping. I could certainly use it with some projects i have in mind!
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?
@nikgraf this is awesome. Can't wait to try it out lol.