Β 
Featured

DraftJS Plugins

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

Featured comment

Nik Graf@nikgraf Β· Engineer @ 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@colazionearoma Β· Socialmediapreneur
@nikgraf stickers! 😻
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@tomolivier Β· Co-founder @Metaflow_ai @Explee
@nikgraf Great job Nick :)
Nik Graf@nikgraf Β· Engineer @ 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 Β· 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 [
Nik Graf@nikgraf Β· Engineer @ Serverless
@pranav_ahuja not with the current setup. what you could is simply copy the whole plugin and change the regex :) see here the mention plugin folder: https://github.com/draft-js-plug...
Would you recommend DraftJS Plugins to a friend?
DiscussionYou need to become a Contributor to join the discussion - Find out how.
Nik Graf
Maker
@nikgraf Β· Engineer @ 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@colazionearoma Β· Socialmediapreneur
@nikgraf stickers! 😻
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@tomolivier Β· Co-founder @Metaflow_ai @Explee
@nikgraf Great job Nick :)
Nik Graf
Maker
@nikgraf Β· Engineer @ 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 Β· 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 [
Nik Graf
Maker
@nikgraf Β· Engineer @ Serverless
@pranav_ahuja not with the current setup. what you could is simply copy the whole plugin and change the regex :) see here the mention plugin folder: https://github.com/draft-js-plug...
Moritz Kobrna@neuling2k Β· Developer & Co-Founder @die_antwort
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
Maker
@mxstbr Β· Freelance Frontend Developer
@neuling2k it's sooo nice, @nikgraf really outdid himself β€” both using and writing plugins is a breeze!
Nik Graf
Maker
@nikgraf Β· Engineer @ 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@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
Maker
@nikgraf Β· Engineer @ 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@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@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, StudentPay
@nikgraf this is awesome. Can't wait to try it out lol.