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,25 +188,11 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
-					//#region カスタム絵文字
+					const { emoji } = token;
-					if (this.customEmojis != null) {
+					return [createElement('mk-emoji', {
-						const customEmoji = this.customEmojis.find(e => e.name == token.emoji || (e.aliases || []).includes(token.emoji));
+						attrs: { 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)];
-				}
 
 				case 'search': {
 					return [createElement(MkGoogle, {

src/models/mastodon/emoji.ts

@@ -0,0 +1,35 @@
+export type IMastodonEmoji = {
+	shortcode: string,
+	url: string,
+	static_url: string,
+	visible_in_picker: boolean
+};
+
+export async function toMastodonEmojis(emoji: any): Promise<IMastodonEmoji[]> {
+	return [{
+		shortcode: emoji.name,
+		url: emoji.url,
+		static_url: emoji.url, // TODO: Implement ensuring static emoji
+		visible_in_picker: true
+	}, ...(emoji.aliases as string[] || []).map(x => ({
+		shortcode: x,
+		url: emoji.url,
+		static_url: emoji.url,
+		visible_in_picker: true
+	}))];
+}
+
+export function toMisskeyEmojiSync(emoji: IMastodonEmoji) {
+	return {
+		name: emoji.shortcode,
+		url: emoji.url
+	};
+}
+
+export function toMisskeyEmojiWithAliasesSync(emoji: IMastodonEmoji, ...aliases: string[]) {
+	return {
+		name: emoji.shortcode,
+		aliases,
+		url: emoji.url
+	};
+}

src/server/api/mastodon.ts

@@ -5,17 +5,18 @@ import config from '../../config';
 import Meta from '../../models/meta';
 import { ObjectID } from 'bson';
 import Emoji from '../../models/emoji';
+import { toMastodonEmojis } from '../../models/mastodon/emoji';
 const pkg = require('../../../package.json');
 
 // Init router
 const router = new Router();
 
 router.get('/v1/custom_emojis', async ctx => ctx.body =
-	await Emoji.find({ host: null }, {
+	(await Emoji.find({ host: null }, {
 		fields: {
 			_id: false
 		}
-	}));
+	})).map(toMastodonEmojis));
 
 router.get('/v1/instance', async ctx => { // TODO: This is a temporary implementation. Consider creating helper methods!
 	const meta = await Meta.findOne() || {};
@@ -40,6 +41,11 @@ router.get('/v1/instance', async ctx => { // TODO: This is a temporary implement
 		notesCount: 0
 	};
 	const acct = maintainer.host ? `${maintainer.username}@${maintainer.host}` : maintainer.username;
+	const emojis = (await Emoji.find({ host: null }, {
+		fields: {
+			_id: false
+		}
+	})).map(toMastodonEmojis);
 
 	ctx.body = {
 		uri: config.hostname,
@@ -79,7 +85,7 @@ router.get('/v1/instance', async ctx => { // TODO: This is a temporary implement
 			followers_count: maintainer.followersCount,
 			following_count: maintainer.followingCount,
 			statuses_count: maintainer.notesCount,
-			emojis: [],
+			emojis: emojis,
 			moved: null,
 			fields: null
 		}