Use Twemoji

src/client/app/common/views/components/autocomplete.vue

@@ -40,18 +40,20 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => {
 });
 
 const emjdb: EmojiDef[] = lib.map((x: any) => ({
-	emoji: x[1].char,
+	emoji: `:${x[0]}:`,
 	name: x[0],
-	aliasOf: null
+	aliasOf: null,
+	url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
 }));
 
 lib.forEach((x: any) => {
 	if (x[1].keywords) {
 		x[1].keywords.forEach(k => {
 			emjdb.push({
-				emoji: x[1].char,
+				emoji: `:${x[0]}:`,
 				name: k,
-				aliasOf: x[0]
+				aliasOf: x[0],
+				url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
 			});
 		});
 	}

src/client/app/common/views/components/emoji.vue

@@ -0,0 +1,42 @@
+<template>
+<img class="mk-emoji" :src="url" :alt="alt || name" :title="name">
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { lib } from 'emojilib';
+export default Vue.extend({
+	props: ['emoji'],
+	data() {
+		return {
+			url: null,
+			alt: null,
+			name: null
+		}
+	},
+	mounted() {
+		this.$nextTick(() => this.exec());
+	},
+	methods: {
+		exec() {
+			const { emoji } = this;
+			this.name = emoji;
+			(this as any).api('meta').then(meta =>
+				this.url = meta && meta.emojis ? meta.emojis.find(e => e.name === emoji || e.aliases && e.aliases.includes(emoji)).url : null);
+			if (!this.url) {
+				const { char } = lib[emoji] || { char: null };
+				if (char) {
+					this.url = `https://twemoji.maxcdn.com/2/svg/${char.codePointAt(0).toString(16)}.svg`;
+					this.alt = char;
+				}
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-emoji
+	height 2.5em
+	vertical-align middle
+</style>

src/client/app/common/views/components/index.ts

@@ -39,6 +39,7 @@ import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import githubSetting from './github-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
+import emoji from './emoji.vue';
 import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
@@ -93,6 +94,7 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-github-setting', githubSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
+Vue.component('mk-emoji', emoji);
 Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);

src/client/app/common/views/components/misskey-flavored-markdown.ts

@@ -188,24 +188,10 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
-					//#region カスタム絵文字
-					if (this.customEmojis != null) {
-						const customEmoji = this.customEmojis.find(e => e.name == token.emoji || (e.aliases || []).includes(token.emoji));
-						if (customEmoji) {
-							return [createElement('img', {
-								attrs: {
-									src: customEmoji.url,
-									alt: token.emoji,
-									title: token.emoji,
-									style: 'height: 2.5em; vertical-align: middle;'
-								}
-							})];
-						}
-					}
-					//#endregion
-
-					const emoji = emojilib.lib[token.emoji];
-					return [createElement('span', emoji ? emoji.char : token.content)];
+					const { emoji } = token;
+					return [createElement('mk-emoji', {
+						attrs: { emoji }
+					})];
 				}
 
 				case 'search': {