DraftJS Plugins

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

get it
#5 Product of the DayMarch 23, 2016



You need to become a Contributor to join the discussion - Find out how.
Nik Graf
Nik GrafMaker@nikgraf · Passionate about Reason & Serverless
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. 🙌🎉
Teresa Hammerl
Teresa Hammerl@colazionearoma · Socialmediapreneur
@nikgraf stickers! 😻
Elisabeth Woditschka
Elisabeth Woditschka@elisabeth_woditschka · Editor, Forbes Austria
@nikgraf I am curious, how you came up with this idea, and if not answered within this, why? :)
Thomas Olivier
Thomas Olivier@tomolivier · Co-founder @Metaflow_ai @Explee
@nikgraf Great job Nick :)
Nik Graf
Nik GrafMaker@nikgraf · Passionate about Reason & Serverless
@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 :)
Pranav Ahuja
Pranav Ahuja@pranav_ahuja · Founder @ Xeno
@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 [
Moritz Kobrna
Moritz Kobrna@neuling2k · Developer & Co-Founder @getbedtimestory
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! 🙌
Max Stoiber
Max StoiberMaker@mxstbr · Technical Cofounder, Spectrum.chat
@neuling2k it's sooo nice, @nikgraf really outdid himself — both using and writing plugins is a breeze!
Nik Graf
Nik GrafMaker@nikgraf · Passionate about Reason & Serverless
@mxstbr @neuling2k wouldn't have been possible without you help as well as from the others! I really mean this. Thanks again! 🙌
Scott Hasbrouck
Scott HasbrouckHiring@scotthasbrouck · Sales Engineer at Lob
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!
Nik Graf
Nik GrafMaker@nikgraf · Passionate about Reason & Serverless
@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.
Scott Hasbrouck
Scott HasbrouckHiring@scotthasbrouck · Sales Engineer at Lob
@nikgraf cool. I may be interested in helping. I could certainly use it with some projects i have in mind!
Alexander Khanukov
Alexander Khanukov@akhanukov · CX/UX strategist, nascent entrepreneur
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?
Fizzle@dopesavant · Founder, AccuNews
@nikgraf this is awesome. Can't wait to try it out lol.