Subscribe
Sign in
DraftJS Plugins — Slack-like emojis, FB-like mentions & stickers for web apps
22
Replies
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!
@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
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! 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!
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?
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. 🙌🎉
@nikgraf I am curious, how you came up with this idea, and if not answered within this, why? :)
@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 [
@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...
Try.com