Merge branch 'dev'

ui/src/components/comment-form.tsx

@@ -1,7 +1,8 @@
 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, mentionDropdownFetchLimit, msgOp, md, emojiMentionList, mdToHtml, randomStr, imageUploadUrl, markdownHelpUrl } from '../utils';
+import { capitalizeFirstLetter, mentionDropdownFetchLimit, msgOp, mdToHtml, randomStr, imageUploadUrl, markdownHelpUrl } from '../utils';
+import { twemojis } from '../twemojis';
 import { WebSocketService, UserService } from '../services';
 import * as autosize from 'autosize';
 import { i18n } from '../i18next';
@@ -49,12 +50,12 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           trigger: ':',
           menuItemTemplate: (item: any) => {
             let emoji = `:${item.original.key}:`;
-            return `${md.renderInline(emoji)}  ${emoji}`;
+            return `${item.original.val} ${emoji}`;
           },
           selectTemplate: (item: any) => {
             return `:${item.original.key}:`;
           },
-          values: emojiMentionList(),
+          values: Object.entries(twemojis).map(e => {return {'key': e[0], 'val': e[1]}}),
           allowSpaces: false,
           autocompleteMode: true,
           menuItemLimit: 10,

ui/src/components/comment-node.tsx

@@ -65,6 +65,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     let node = this.props.node;
     return (
       <div className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
+        {!this.state.collapsed && 
           <div className={`vote-bar mr-2 float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
             <button className={`btn p-0 ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>
               <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
@@ -74,6 +75,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
             </button>
           </div>
+        }
         <div id={`comment-${node.comment.id}`} className={`details comment-node ml-4 ${this.isCommentNew ? 'mark' : ''}`}>
           <ul class="list-inline mb-0 text-muted small">
             <li className="list-inline-item">

ui/src/css/main.css

@@ -63,6 +63,10 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
   height: auto;
 }
 
+.md-div h1,h2,h3,h4,h5 {
+  font-size:1.171875rem;
+}
+
 .comment-node {
   margin-bottom: 10px;
 }

ui/src/utils.ts

@@ -11,8 +11,8 @@ 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';
 import * as twemoji from 'twemoji';
+import { twemojis } from './twemojis';
 
 export const repoUrl = 'https://github.com/dessalines/lemmy';
 export const imageUploadUrl = 'https://postimages.org/';
@@ -49,7 +49,9 @@ export const md = new markdown_it({
       return '</details>\n';
     }
   }
-}).use(markdownitEmoji);
+}).use(markdownitEmoji, {
+  defs: twemojis
+});
 
 md.renderer.rules.emoji = function(token, idx) {
   return twemoji.parse(token[idx].content);
@@ -195,15 +197,6 @@ 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')) {