絵文字ピッカーで最近使用した絵文字がバグっているのを修正

あとMkEmojiをリファクタリング

src/client/components/emoji-picker.vue

@@ -34,12 +34,10 @@
 					<div>
 						<button v-for="emoji in reactions || $store.state.settings.reactions"
 							class="_button"
-							:title="emoji.name"
 							@click="chosen(emoji, $event)"
-							:key="emoji"
 							tabindex="0"
 						>
-							<MkEmoji :emoji="emoji.startsWith(':') ? null : emoji" :name="emoji.startsWith(':') ? emoji.substr(1, emoji.length - 2) : null" :normal="true"/>
+							<MkEmoji :emoji="emoji" :normal="true"/>
 						</button>
 					</div>
 				</section>
@@ -47,14 +45,12 @@
 				<section>
 					<header class="_acrylic"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
 					<div>
-						<button v-for="emoji in ($store.state.device.recentEmojis || [])"
+						<button v-for="emoji in $store.state.device.recentlyUsedEmojis"
 							class="_button"
-							:title="emoji.name"
 							@click="chosen(emoji, $event)"
 							:key="emoji"
 						>
-							<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
-							<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+							<MkEmoji :emoji="emoji" :normal="true"/>
 						</button>
 					</div>
 				</section>
@@ -320,6 +316,10 @@ export default defineComponent({
 	},
 
 	methods: {
+		getKey(emoji: any) {
+			return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
+		},
+
 		chosen(emoji: any, ev) {
 			if (ev) {
 				const el = ev.currentTarget || ev.target;
@@ -329,15 +329,15 @@ export default defineComponent({
 				os.popup(Particle, { x, y }, {}, 'end');
 			}
 
-			const getKey = (emoji: any) => typeof emoji === 'string' ? emoji : emoji.char || `:${emoji.name}:`;
-			this.$emit('done', getKey(emoji));
+			const key = this.getKey(emoji);
+			this.$emit('done', key);
 			this.$refs.modal.close();
 
 			// 最近使った絵文字更新
-			let recents = this.$store.state.device.recentEmojis || [];
-			recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
-			recents.unshift(emoji)
-			this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
+			let recents = this.$store.state.device.recentlyUsedEmojis;
+			recents = recents.filter((e: any) => e !== key);
+			recents.unshift(key);
+			this.$store.commit('device/set', { key: 'recentlyUsedEmojis', value: recents.splice(0, 16) });
 		},
 
 		paste(event) {

src/client/components/emoji.vue

@@ -2,7 +2,7 @@
 <img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt"/>
 <img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
 <span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
-<span v-else>:{{ name }}:</span>
+<span v-else>{{ emoji }}</span>
 </template>
 
 <script lang="ts">
@@ -12,13 +12,9 @@ import { twemojiSvgBase } from '../../misc/twemoji-base';
 
 export default defineComponent({
 	props: {
-		name: {
-			type: String,
-			required: false
-		},
 		emoji: {
 			type: String,
-			required: false
+			required: true
 		},
 		normal: {
 			type: Boolean,
@@ -49,6 +45,10 @@ export default defineComponent({
 	},
 
 	computed: {
+		isCustom(): boolean {
+			return this.emoji.startsWith(':');
+		},
+
 		alt(): string {
 			return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
 		},
@@ -68,8 +68,8 @@ export default defineComponent({
 	watch: {
 		ce: {
 			handler() {
-				if (this.name) {
-					const customEmoji = this.ce.find(x => x.name == this.name);
+				if (this.isCustom) {
+					const customEmoji = this.ce.find(x => x.name === this.emoji.substr(1, this.emoji.length - 2));
 					if (customEmoji) {
 						this.customEmoji = customEmoji;
 						this.url = this.$store.state.device.disableShowingAnimatedImages
@@ -83,7 +83,7 @@ export default defineComponent({
 	},
 
 	created() {
-		if (!this.name) {
+		if (!this.isCustom) {
 			this.char = this.emoji;
 		}
 

src/client/components/mfm.ts

@@ -207,8 +207,7 @@ export default defineComponent({
 				case 'emoji': {
 					return [h(MkEmoji, {
 						key: Math.random(),
-						emoji: token.node.props.emoji,
-						name: token.node.props.name,
+						emoji: token.node.props.name ? `:${token.node.props.name}:` : token.node.props.emoji,
 						customEmojis: this.customEmojis,
 						normal: this.plain
 					})];

src/client/components/reaction-icon.vue

@@ -1,9 +1,9 @@
 <template>
-<MkEmoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<MkEmoji :emoji="reaction" :custom-emojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';import * as os from '@/os';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
 	props: {

src/client/store.ts

@@ -59,7 +59,7 @@ export const defaultDeviceSettings = {
 	useOsNativeEmojis: false,
 	serverDisconnectedBehavior: 'quiet',
 	accounts: [],
-	recentEmojis: [],
+	recentlyUsedEmojis: [],
 	themes: [],
 	darkTheme: '8050783a-7f63-445a-b270-36d0f6ba1677',
 	lightTheme: '4eea646f-7afa-4645-83e9-83af0333cd37',