How does Twitter implement its Tweet Box?

Question

I\'m trying to implement something like Twitter\'s tweet box, specifically:

• Automatically highlights text in a red background when the overall length exceeds 1

Answer 1

This is not a direct answer with source code building the part of your application to your spec.

This is really not an easy thing to do.

You're right - the way to solving this problem is to use a contenteditable="true" container. But I'm afraid that from there it gets much much more complicated.

Enter DraftJS - A javascript solution to rich-text editing which does most of the heavy lifting for you.

Both of my solutions below require the use of both React and DraftJS

---

The Plug-&-Play Solution:

The React + DraftJS + Someone Else's "Plugin" solution is already here. You can check out draft-js-plugins.com. And here's the Github source code.

Personally, I wouldn't go this way. I would rather study their GitHub source code and implement my own DraftJS entities. Because I think that React-JS-Plugins feels a little bit clunky and overweight for just Links and Mentions. Plus, where are you "mentioning" from? Your own Application? Twitter? Doing it this way lets you have control over where you're grabbing the so-called "mentions".

---

The DIY Solution:

The best way I have found is to build your own set of working entities on top of a DraftJS based rich-text editor.

This of course also requires that you're using React.

Forgive me for not actually building a complete set of working code. I was interested in doing something similar for an App I'm building in Meteor with React on the front-end. So this really made sense to me because I'd only be adding one more library (DraftJS) and the rest would be my custom entities coded out.