絵文字ピッカーの Unicode 12.0 対応など (#5441)

* Twemoji 12.1

* 絵文字ライブラリを持つように

* Fix chess_pawn emoji

* Add Unicode 12.0 emojis

* Add transgender flag/symbol emoji

* Add some japanese emoji keywords

* format emojilist.json

* fix emojilist order

* Add missing flags

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

@@ -28,9 +28,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import * as emojilib from 'emojilib';
+import { emojilist } from '../../../../../misc/emojilist';
 import contains from '../../../common/scripts/contains';
-import { twemojiBase } from '../../../../../misc/twemoji-base';
+import { twemojiSvgBase } from '../../../../../misc/twemoji-base';
 import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
 
 type EmojiDef = {
@@ -41,9 +41,7 @@ type EmojiDef = {
 	isCustomEmoji?: boolean;
 };
 
-const lib = Object.entries(emojilib.lib).filter((x: any) => {
-	return x[1].category != 'flags';
-});
+const lib = emojilist.filter(x => x.category !== 'flags');
 
 const char2file = (char: string) => {
 	let codes = Array.from(char).map(x => x.codePointAt(0).toString(16));
@@ -52,21 +50,21 @@ const char2file = (char: string) => {
 	return codes.join('-');
 };
 
-const emjdb: EmojiDef[] = lib.map((x: any) => ({
-	emoji: x[1].char,
-	name: x[0],
+const emjdb: EmojiDef[] = lib.map(x => ({
+	emoji: x.char,
+	name: x.name,
 	aliasOf: null,
-	url: `${twemojiBase}/2/svg/${char2file(x[1].char)}.svg`
+	url: `${twemojiSvgBase}/${char2file(x.char)}.svg`
 }));
 
-for (const x of lib as any) {
-	if (x[1].keywords) {
-		for (const k of x[1].keywords) {
+for (const x of lib) {
+	if (x.keywords) {
+		for (const k of x.keywords) {
 			emjdb.push({
-				emoji: x[1].char,
+				emoji: x.char,
 				name: k,
-				aliasOf: x[0],
-				url: `${twemojiBase}/2/svg/${char2file(x[1].char)}.svg`
+				aliasOf: x.name,
+				url: `${twemojiSvgBase}/${char2file(x.char)}.svg`
 			});
 		}
 	}
@@ -85,7 +83,7 @@ export default Vue.extend({
 			hashtags: [],
 			emojis: [],
 			select: -1,
-			emojilib,
+			emojilist,
 			emojiDb: [] as EmojiDef[]
 		}
 	},

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

@@ -5,6 +5,7 @@
 			:title="category.text"
 			@click="go(category)"
 			:class="{ active: category.isActive }"
+			:key="category.text"
 		>
 			<fa :icon="category.icon" fixed-width/>
 		</button>
@@ -12,18 +13,19 @@
 	<div class="emojis">
 		<header><fa :icon="categories.find(x => x.isActive).icon" fixed-width/> {{ categories.find(x => x.isActive).text }}</header>
 		<div v-if="categories.find(x => x.isActive).name">
-			<button v-for="emoji in Object.entries(lib).filter(([k, v]) => v.category === categories.find(x => x.isActive).name)"
-				:title="emoji[0]"
-				@click="chosen(emoji[1].char)"
-				:key="emoji[0]"
+			<button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
+				:title="emoji.name"
+				@click="chosen(emoji.char)"
+				:key="emoji.name"
 			>
-				<mk-emoji :emoji="emoji[1].char"/>
+				<mk-emoji :emoji="emoji.char"/>
 			</button>
 		</div>
 		<div v-else>
 			<button v-for="emoji in customEmojis"
 				:title="emoji.name"
 				@click="chosen(`:${emoji.name}:`)"
+				:key="emoji.name"
 			>
 				<img :src="emoji.url" :alt="emoji.name"/>
 			</button>
@@ -35,7 +37,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { lib } from 'emojilib';
+import { emojilist } from '../../../../../misc/emojilist';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag } from '@fortawesome/free-regular-svg-icons';
 
@@ -44,7 +46,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			lib,
+			emojilist,
 			customEmojis: [],
 			categories: [{
 				text: this.$t('custom-emoji'),

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

@@ -7,10 +7,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-// スクリプトサイズがデカい
-//import { lib } from 'emojilib';
 import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
-import { twemojiBase } from '../../../../../misc/twemoji-base';
+import { twemojiSvgBase } from '../../../../../misc/twemoji-base';
 
 export default Vue.extend({
 	props: {
@@ -92,7 +90,7 @@ export default Vue.extend({
 			if (!codes.includes('200d')) codes = codes.filter(x => x != 'fe0f');
 			codes = codes.filter(x => x && x.length);
 
-			this.url = `${twemojiBase}/2/svg/${codes.join('-')}.svg`;
+			this.url = `${twemojiSvgBase}/${codes.join('-')}.svg`;
 		}
 	},
 });

src/misc/emojilist.ts

@@ -0,0 +1,7 @@
+// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
+export const emojilist = require('../emojilist.json') as {
+	name: string;
+	keywords: string[];
+	char: string;
+	category: 'people' | 'animals_and_nature' | 'food_and_drink' | 'activity' | 'travel_and_places' | 'objects' | 'symbols' | 'flags';
+}[];

src/misc/twemoji-base.ts

@@ -1,4 +1 @@
-export const twemojiBase = 'https://cdn.jsdelivr.net/npm/twemoji@12.0.1';
-// https://cdn.jsdelivr.net/npm/twemoji@12.0.1
-// https://cdnjs.cloudflare.com/ajax/libs/twemoji/12.0.1
-// https://twemoji.maxcdn.com
+export const twemojiSvgBase = 'https://twemoji.maxcdn.com/v/latest/svg';