Custom emoji (#3061)

* wip

* wip

* wip

4 files changed, 60 insertions, 8 deletions

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index bc0120c9ab..d46d536659 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -14,7 +14,8 @@
 	</ol>
 	<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
 		<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
-			<span class="emoji">{{ emoji.emoji }}</span>
+			<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span class="emoji" v-else>{{ emoji.emoji }}</span>
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
 			<span class="alias" v-if="emoji.alias">({{ emoji.alias }})</span>
 		</li>
@@ -169,22 +170,45 @@ export default Vue.extend({
 				}
 			} else if (this.type == 'emoji') {
 				const matched = [];
+				const max = 30;
+
+				const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis;
+				customEmojis.some(x => {
+					if (x.name.startsWith(this.q)) matched.push({
+						name: x.name,
+						emoji: `:${x.name}:`,
+						url: x.url
+					});
+					return matched.length == max;
+				});
+				customEmojis.some(x => {
+					const alias = (x.aliases || []).find(a => a.startsWith(this.q));
+					if (alias) matched.push({
+						alias: x.name,
+						name: alias,
+						emoji: `:${x.name}:`,
+						url: x.url
+					});
+					return matched.length == max;
+				});
+
 				emjdb.some(x => {
 					if (x.name.indexOf(this.q) == 0 && !x.alias && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
-					return matched.length == 30;
+					return matched.length == max;
 				});
-				if (matched.length < 30) {
+				if (matched.length < max) {
 					emjdb.some(x => {
 						if (x.name.indexOf(this.q) == 0 && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
-						return matched.length == 30;
+						return matched.length == max;
 					});
 				}
-				if (matched.length < 30) {
+				if (matched.length < max) {
 					emjdb.some(x => {
 						if (x.name.indexOf(this.q) > -1 && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
-						return matched.length == 30;
+						return matched.length == max;
 					});
 				}
+
 				this.emojis = matched;
 			}
 		},
@@ -340,6 +364,10 @@ export default Vue.extend({
 			margin 0 4px 0 0
 			width 24px
 
+			> img
+				width 24px
+				vertical-align bottom
+
 		.name
 			color var(--autocompleteItemText)
 
diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts
index d36a0a3714..c45bb1022e 100644
--- a/src/client/app/common/views/components/misskey-flavored-markdown.ts
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts
@@ -3,7 +3,6 @@ import * as emojilib from 'emojilib';
 import { length } from 'stringz';
 import parse from '../../../../../mfm/parse';
 import getAcct from '../../../../../misc/acct/render';
-import { url } from '../../../config';
 import MkUrl from './url.vue';
 import MkGoogle from './google.vue';
 import { concat } from '../../../../../prelude/array';
@@ -186,6 +185,21 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
+					//#region カスタム絵文字
+					const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis;
+					const customEmoji = 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)];
 				}
diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts
index e2cc64d79f..1a5c5daedc 100644
--- a/src/client/app/common/views/directives/autocomplete.ts
+++ b/src/client/app/common/views/directives/autocomplete.ts
@@ -222,13 +222,15 @@ class Autocomplete {
 			const trimmedBefore = before.substring(0, before.lastIndexOf(':'));
 			const after = source.substr(caret);
 
+			if (value.startsWith(':')) value = value + ' ';
+
 			// 挿入
 			this.text = trimmedBefore + value + after;
 
 			// キャレットを戻す
 			this.vm.$nextTick(() => {
 				this.textarea.focus();
-				const pos = trimmedBefore.length + 1;
+				const pos = trimmedBefore.length + (value.startsWith(':') ? value.length : 1);
 				this.textarea.setSelectionRange(pos, pos);
 			});
 		}
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index d50c4e15b2..9c351e9041 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -512,6 +512,14 @@ export default class MiOS extends EventEmitter {
 
 	/**
 	 * Misskeyのメタ情報を取得します
+	 */
+	@autobind
+	public getMetaSync() {
+		return this.meta ? this.meta.data : null;
+	}
+
+	/**
+	 * Misskeyのメタ情報を取得します
 	 * @param force キャッシュを無視するか否か
 	 */
 	@autobind