Add emoji autocomplete

- Fixes #255
This commit is contained in:
Dessalines 2019-08-30 17:40:59 -07:00
parent 13ef254c61
commit 168a0f61f1
3 changed files with 33 additions and 4 deletions

View File

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

1
ui/src/emoji_list.ts vendored Normal file

File diff suppressed because one or more lines are too long

14
ui/src/utils.ts vendored
View File

@ -11,15 +11,16 @@ import { UserOperation, Comment, User, SortType, ListingType } from './interface
import * as markdown_it from 'markdown-it'; import * as markdown_it from 'markdown-it';
declare var markdownitEmoji: any; declare var markdownitEmoji: any;
import * as markdown_it_container from 'markdown-it-container'; 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 { export function msgOp(msg: any): UserOperation {
let opStr: string = msg.op; let opStr: string = msg.op;
return UserOperation[opStr]; return UserOperation[opStr];
} }
var md = new markdown_it({ export const md = new markdown_it({
html: false, html: false,
linkify: true, linkify: true,
typographer: true typographer: true
@ -184,6 +185,15 @@ export function getLanguage(): string {
return (navigator.language || navigator.userLanguage); 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 { export function getMomentLanguage(): string {
let lang = getLanguage(); let lang = getLanguage();
if (lang.startsWith('zh')) { if (lang.startsWith('zh')) {