Add emoji autocomplete

- Fixes #255

ui/src/components/comment-form.tsx

@@ -1,7 +1,7 @@
 import { Component, linkEvent } from 'inferno';
 import { CommentNode as CommentNodeI, CommentForm as CommentFormI, SearchForm, SearchType, SortType, UserOperation, SearchResponse } from '../interfaces';
 import { Subscription } from "rxjs";
-import { capitalizeFirstLetter, fetchLimit, msgOp } from '../utils';
+import { capitalizeFirstLetter, fetchLimit, msgOp, md, emojiMentionList } from '../utils';
 import { WebSocketService, UserService } from '../services';
 import * as autosize from 'autosize';
 import { i18n } from '../i18next';
@@ -42,7 +42,21 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
 
     this.tribute = new Tribute({
       collection: [
-
+        // Emojis
+        {
+          trigger: ':',
+          menuItemTemplate: (item: any) => {
+            let emoji = `:${item.original.key}:`;
+            return `${md.renderInline(emoji)}  ${emoji}`;
+          },
+          selectTemplate: (item: any) => {
+            return `:${item.original.key}:`;
+          },
+          values: emojiMentionList(),
+          allowSpaces: false,
+          autocompleteMode: true,
+          menuItemLimit: 10,
+        },
         // Users
         {
           trigger: '@',
@@ -52,7 +66,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           values: (text: string, cb: any) => {
             this.userSearch(text, (users: any) => cb(users));
           },
+          allowSpaces: false,
           autocompleteMode: true,
+          menuItemLimit: 10,
         },
 
         // Communities
@@ -64,7 +80,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           values: (text: string, cb: any) => {
             this.communitySearch(text, (communities: any) => cb(communities));
           },
+          allowSpaces: false,
           autocompleteMode: true,
+          menuItemLimit: 10,
         }
       ]
     });

ui/src/utils.ts

@@ -11,15 +11,16 @@ import { UserOperation, Comment, User, SortType, ListingType } from './interface
 import * as markdown_it from 'markdown-it';
 declare var markdownitEmoji: any;
 import * as markdown_it_container from 'markdown-it-container';
+import { emoji_list } from './emoji_list';
 
-export let repoUrl = 'https://github.com/dessalines/lemmy';
+export const repoUrl = 'https://github.com/dessalines/lemmy';
 
 export function msgOp(msg: any): UserOperation {
   let opStr: string = msg.op;
   return UserOperation[opStr];
 }
 
-var md = new markdown_it({
+export const md = new markdown_it({
   html: false,
   linkify: true,
   typographer: true
@@ -184,6 +185,15 @@ export function getLanguage(): string {
   return (navigator.language || navigator.userLanguage);
 }
 
+export function emojiMentionList(): Array<{}> {
+  let keyedEmojis = [];
+  for (let e of emoji_list) { 
+    let obj = {key: e}; 
+    keyedEmojis.push(obj);
+  }
+  return keyedEmojis;
+}
+
 export function getMomentLanguage(): string {
   let lang = getLanguage();
   if (lang.startsWith('zh')) {