Chat input and autocomplete.

[Mitchdev]

NOTE: Requires further testing.

---

TODO

---

Changed textarea to contenteditable div for the input.
This allows us to put custom elements inside of the input such as displaying the emotes and showing usernames in the flair colors.

Redesigned autocomplete with Trie data structure.
You can also no search autocomplete for only usernames using @username and only emotes using :emote.

• no prefix
  

• @ prefix
  

• : prefix
  

[Mitchdev]

@11k I do not have an android device to test this but every thing else seems ok.

[11k]

• When the auto-complete helper is enabled, the arrow keys navigate through the auto-complete options instead of the message until you press Space. I think it would be better if the user always had control of the cursor.
• Moving the caret into an emote superimposes the emote's text on top. Depending on the emote's color, the text can be difficult to see. Modifying the text replaces the emote with the modified text. If the text doesn't fit over the emote, it behaves like a small input field you have to work through horizontally with your arrow keys. I think this system is very clumsy. There shouldn't be an option to manipulate an emote's text after it's been entered. Maybe a system where you display a miniature version of the emote near the text will work, but I'm not sure.
• There's no visual indication when you highlight an emote, making it seem like it isn't highlighted.
• When pasting text that contains an emote, the input doesn't expand to fit the contents of the message entirely. Typing one letter after pasting fixes this.
• Sending a message doesn't automatically dismiss the auto-complete helper.
• Chrome underlines misspelled words in red. While typing, the red underlines disappear until you stop typing, as if reprocessing the entire message for spelling mistakes for every letter.
• I highly recommend merging master into this branch and running the development server so you can test this PR with production chat. It might help you catch other issues.

[Mitchdev]

I noticed while doing this that t5 caret doesn't show can be fixed with caret-color: $color-chat-text2 in flairs.css