Merge pull request #3117 from syuilo/twemoji

Use Twemoji
This commit is contained in:
syuilo 2018-11-05 20:52:55 +09:00 committed by GitHub
commit 0047920c1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 157 additions and 56 deletions

View file

@ -131,6 +131,7 @@ common:
show-full-acct: "ユーザー名のホストを省略しない"
reduce-motion: "UIの動きを減らす"
this-setting-is-this-device-only: "このデバイスのみ"
use-os-default-emojis: "OS標準の絵文字を使用"
do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'

View file

@ -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" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-if="emoji.isCustomEmoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-else-if="!useOsDefaultEmojis"><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.aliasOf">({{ emoji.aliasOf }})</span>
@ -33,6 +34,7 @@ type EmojiDef = {
name: string;
aliasOf?: string;
url?: string;
isCustomEmoji?: boolean;
};
const lib = Object.entries(emojilib.lib).filter((x: any) => {
@ -42,7 +44,8 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => {
const emjdb: EmojiDef[] = lib.map((x: any) => ({
emoji: x[1].char,
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) => {
@ -51,7 +54,8 @@ lib.forEach((x: any) => {
emjdb.push({
emoji: x[1].char,
name: k,
aliasOf: x[0]
aliasOf: x[0],
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
});
});
}
@ -77,6 +81,10 @@ export default Vue.extend({
computed: {
items(): HTMLCollection {
return (this.$refs.suggests as Element).children;
},
useOsDefaultEmojis(): boolean {
return this.$store.state.device.useOsDefaultEmojis;
}
},
@ -107,7 +115,8 @@ export default Vue.extend({
emojiDefinitions.push({
name: x.name,
emoji: `:${x.name}:`,
url: x.url
url: x.url,
isCustomEmoji: true
});
if (x.aliases) {
@ -116,7 +125,8 @@ export default Vue.extend({
name: alias,
aliasOf: x.name,
emoji: `:${x.name}:`,
url: x.url
url: x.url,
isCustomEmoji: true
});
});
}

View file

@ -0,0 +1,77 @@
<template>
<img v-if="customEmoji" class="fvgwvorwhxigeolkkrcderjzcawqrscl custom" :src="url" :alt="alt" :title="alt"/>
<img v-else-if="char && !useOsDefaultEmojis" class="fvgwvorwhxigeolkkrcderjzcawqrscl" :src="url" :alt="alt" :title="alt"/>
<span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
<span v-else>:{{ name }}:</span>
</template>
<script lang="ts">
import Vue from 'vue';
import { lib } from 'emojilib';
export default Vue.extend({
props: {
name: {
type: String,
required: false
},
emoji: {
type: String,
required: false
},
customEmojis: {
required: false,
default: []
}
},
data() {
return {
url: null,
char: null,
customEmoji: null
}
},
computed: {
alt(): string {
return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
},
useOsDefaultEmojis(): boolean {
return this.$store.state.device.useOsDefaultEmojis;
}
},
created() {
if (this.name) {
const customEmoji = this.customEmojis.find(x => x.name == this.name);
if (customEmoji) {
this.customEmoji = customEmoji;
this.url = customEmoji.url;
} else {
const emoji = lib[this.name];
if (emoji) {
this.char = emoji.char;
}
}
} else {
this.char = this.emoji;
}
if (this.char) {
this.url = `https://twemoji.maxcdn.com/2/svg/${this.char.codePointAt(0).toString(16)}.svg`;
}
}
});
</script>
<style lang="stylus" scoped>
.fvgwvorwhxigeolkkrcderjzcawqrscl
height 1em
&.custom
height 2.5em
vertical-align middle
</style>

View file

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

View file

@ -1,5 +1,4 @@
import Vue, { VNode } from 'vue';
import * as emojilib from 'emojilib';
import { length } from 'stringz';
import parse from '../../../../../mfm/parse';
import getAcct from '../../../../../misc/acct/render';
@ -188,25 +187,16 @@ export default Vue.component('misskey-flavored-markdown', {
}
case 'emoji': {
//#region カスタム絵文字
if (this.customEmojis != null) {
const customEmoji = this.customEmojis.find(e => e.name == token.emoji || (e.aliases || []).includes(token.emoji));
if (customEmoji) {
return [createElement('img', {
return [createElement('mk-emoji', {
attrs: {
src: customEmoji.url,
alt: token.emoji,
title: token.emoji,
style: 'height: 2.5em; vertical-align: middle;'
emoji: token.emoji,
name: token.name
},
props: {
customEmojis: this.customEmojis
}
})];
}
}
//#endregion
const emoji = emojilib.lib[token.emoji];
return [createElement('span', emoji ? emoji.char : token.content)];
}
case 'search': {
return [createElement(MkGoogle, {

View file

@ -145,6 +145,7 @@ class Autocomplete {
} else {
// サジェスト要素作成
this.suggestion = new MkAutocomplete({
parent: this.vm,
propsData: {
textarea: this.textarea,
complete: this.complete,

View file

@ -115,6 +115,7 @@
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<ui-switch v-model="useOsDefaultEmojis">%i18n:common.use-os-default-emojis%</ui-switch>
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
</section>
<section>
@ -324,6 +325,11 @@ export default Vue.extend({
};
},
computed: {
useOsDefaultEmojis: {
get() { return this.$store.state.device.useOsDefaultEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
},
reduceMotion: {
get() { return this.$store.state.device.reduceMotion; },
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }

View file

@ -23,6 +23,7 @@
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<ui-switch v-model="useOsDefaultEmojis">%i18n:common.use-os-default-emojis%</ui-switch>
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
@ -199,6 +200,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
},
useOsDefaultEmojis: {
get() { return this.$store.state.device.useOsDefaultEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
},
reduceMotion: {
get() { return this.$store.state.device.reduceMotion; },
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }

View file

@ -62,7 +62,8 @@ const defaultDeviceSettings = {
deckColumnAlign: 'center',
mobileNotificationPosition: 'bottom',
deckTemporaryColumn: null,
deckDefault: false
deckDefault: false,
useOsDefaultEmojis: false
};
export default (os: MiOS) => new Vuex.Store({

View file

@ -5,16 +5,29 @@
export type TextElementEmoji = {
type: 'emoji';
content: string;
emoji: string;
emoji?: string;
name?: string;
};
const emojiRegex = /^[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/ug;
export default function(text: string) {
const match = text.match(/^:([a-zA-Z0-9+_-]+):/);
if (!match) return null;
const emoji = match[0];
const name = text.match(/^:([a-zA-Z0-9+_-]+):/);
if (name) {
return {
type: 'emoji',
content: emoji,
emoji: match[1]
content: name[0],
name: name[1]
} as TextElementEmoji;
}
const unicode = text.match(emojiRegex);
if (unicode) {
const [content] = unicode;
return {
type: 'emoji',
content,
emoji: content
} as TextElementEmoji;
}
return null;
}

View file

@ -1,6 +0,0 @@
import parse from '../../../mfm/parse';
export default function(text: string) {
if (!text) return [];
return parse(text).filter(t => t.type === 'emoji').map(t => (t as any).emoji);
}

View file

@ -8,9 +8,7 @@ import Note, { INote } from '../../../models/note';
import User from '../../../models/user';
import toHtml from '../misc/get-note-html';
import parseMfm from '../../../mfm/parse';
import getEmojiNames from '../misc/get-emoji-names';
import Emoji, { IEmoji } from '../../../models/emoji';
import { unique } from '../../../prelude/array';
export default async function renderNote(note: INote, dive = true): Promise<any> {
const promisedFiles: Promise<IDriveFile[]> = note.fileIds
@ -110,8 +108,7 @@ export default async function renderNote(note: INote, dive = true): Promise<any>
const content = toHtml(Object.assign({}, note, { text }));
const emojiNames = unique(getEmojiNames(content));
const emojis = await getEmojis(emojiNames);
const emojis = await getEmojis(note.emojis);
const apemojis = emojis.map(emoji => renderEmoji(emoji));
const tag = [
@ -141,12 +138,10 @@ async function getEmojis(names: string[]): Promise<IEmoji[]> {
if (names == null || names.length < 1) return [];
const emojis = await Promise.all(
names.map(async name => {
return await Emoji.findOne({
names.map(name => Emoji.findOne({
name,
host: null
});
})
}))
);
return emojis.filter(emoji => emoji != null);

View file

@ -456,8 +456,8 @@ function extractHashtags(tokens: ReturnType<typeof parse>): string[] {
function extractEmojis(tokens: ReturnType<typeof parse>): string[] {
// Extract emojis
const emojis = tokens
.filter(t => t.type == 'emoji')
.map(t => (t as TextElementEmoji).emoji)
.filter(t => t.type == 'emoji' && t.name)
.map(t => (t as TextElementEmoji).name)
.filter(emoji => emoji.length <= 100);
return unique(emojis);

View file

@ -16,7 +16,7 @@ describe('Text', () => {
{ type: 'text', content: ' '},
{ type: 'mention', content: '@hima_sub@namori.net', canonical: '@hima_sub@namori.net', username: 'hima_sub', host: 'namori.net' },
{ type: 'text', content: ' お腹ペコい ' },
{ type: 'emoji', content: ':cat:', emoji: 'cat'},
{ type: 'emoji', content: ':cat:', name: 'cat'},
{ type: 'text', content: ' '},
{ type: 'hashtag', content: '#yryr', hashtag: 'yryr' }
], tokens);
@ -182,15 +182,20 @@ describe('Text', () => {
it('emoji', () => {
const tokens1 = analyze(':cat:');
assert.deepEqual([
{ type: 'emoji', content: ':cat:', emoji: 'cat'}
{ type: 'emoji', content: ':cat:', name: 'cat' }
], tokens1);
const tokens2 = analyze(':cat::cat::cat:');
assert.deepEqual([
{ type: 'emoji', content: ':cat:', emoji: 'cat'},
{ type: 'emoji', content: ':cat:', emoji: 'cat'},
{ type: 'emoji', content: ':cat:', emoji: 'cat'}
{ type: 'emoji', content: ':cat:', name: 'cat' },
{ type: 'emoji', content: ':cat:', name: 'cat' },
{ type: 'emoji', content: ':cat:', name: 'cat' }
], tokens2);
const tokens3 = analyze('🍎');
assert.deepEqual([
{ type: 'emoji', content: '🍎', emoji: '🍎' }
], tokens3);
});
it('block code', () => {