Custom emoji (#3061)

* wip

* wip

* wip

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)
 

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)];
 				}

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);
 			});
 		}