Refactoring & 設定でTwemojiを使うかどうか切り替えられるように
This commit is contained in:
parent
54e9147782
commit
65961bc15b
|
@ -131,6 +131,7 @@ common:
|
||||||
show-full-acct: "ユーザー名のホストを省略しない"
|
show-full-acct: "ユーザー名のホストを省略しない"
|
||||||
reduce-motion: "UIの動きを減らす"
|
reduce-motion: "UIの動きを減らす"
|
||||||
this-setting-is-this-device-only: "このデバイスのみ"
|
this-setting-is-this-device-only: "このデバイスのみ"
|
||||||
|
use-os-default-emojis: "OS標準の絵文字を使用"
|
||||||
|
|
||||||
do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
|
do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,8 @@
|
||||||
</ol>
|
</ol>
|
||||||
<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
|
<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">
|
<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="emoji" v-else>{{ emoji.emoji }}</span>
|
||||||
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
|
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
|
||||||
<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
|
<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
|
||||||
|
@ -33,6 +34,7 @@ type EmojiDef = {
|
||||||
name: string;
|
name: string;
|
||||||
aliasOf?: string;
|
aliasOf?: string;
|
||||||
url?: string;
|
url?: string;
|
||||||
|
isCustomEmoji?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const lib = Object.entries(emojilib.lib).filter((x: any) => {
|
const lib = Object.entries(emojilib.lib).filter((x: any) => {
|
||||||
|
@ -40,7 +42,7 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const emjdb: EmojiDef[] = lib.map((x: any) => ({
|
const emjdb: EmojiDef[] = lib.map((x: any) => ({
|
||||||
emoji: `:${x[0]}:`,
|
emoji: x[1].char,
|
||||||
name: x[0],
|
name: x[0],
|
||||||
aliasOf: null,
|
aliasOf: null,
|
||||||
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
|
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
|
||||||
|
@ -50,7 +52,7 @@ lib.forEach((x: any) => {
|
||||||
if (x[1].keywords) {
|
if (x[1].keywords) {
|
||||||
x[1].keywords.forEach(k => {
|
x[1].keywords.forEach(k => {
|
||||||
emjdb.push({
|
emjdb.push({
|
||||||
emoji: `:${x[0]}:`,
|
emoji: x[1].char,
|
||||||
name: k,
|
name: k,
|
||||||
aliasOf: x[0],
|
aliasOf: x[0],
|
||||||
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
|
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
|
||||||
|
@ -79,6 +81,10 @@ export default Vue.extend({
|
||||||
computed: {
|
computed: {
|
||||||
items(): HTMLCollection {
|
items(): HTMLCollection {
|
||||||
return (this.$refs.suggests as Element).children;
|
return (this.$refs.suggests as Element).children;
|
||||||
|
},
|
||||||
|
|
||||||
|
useOsDefaultEmojis(): boolean {
|
||||||
|
return this.$store.state.device.useOsDefaultEmojis;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -109,7 +115,8 @@ export default Vue.extend({
|
||||||
emojiDefinitions.push({
|
emojiDefinitions.push({
|
||||||
name: x.name,
|
name: x.name,
|
||||||
emoji: `:${x.name}:`,
|
emoji: `:${x.name}:`,
|
||||||
url: x.url
|
url: x.url,
|
||||||
|
isCustomEmoji: true
|
||||||
});
|
});
|
||||||
|
|
||||||
if (x.aliases) {
|
if (x.aliases) {
|
||||||
|
@ -118,7 +125,8 @@ export default Vue.extend({
|
||||||
name: alias,
|
name: alias,
|
||||||
aliasOf: x.name,
|
aliasOf: x.name,
|
||||||
emoji: `:${x.name}:`,
|
emoji: `:${x.name}:`,
|
||||||
url: x.url
|
url: x.url,
|
||||||
|
isCustomEmoji: true
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,59 +1,77 @@
|
||||||
<template>
|
<template>
|
||||||
<img class="mk-emoji" :src="url" :alt="alt || name" :title="name">
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { lib } from 'emojilib';
|
import { lib } from 'emojilib';
|
||||||
|
|
||||||
const findCustomEmoji = (x, emoji) =>
|
|
||||||
x.name === emoji ||
|
|
||||||
x.aliases && x.aliases.includes(emoji);
|
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: {
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
emoji: {
|
emoji: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false
|
required: false
|
||||||
},
|
},
|
||||||
raw: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
customEmojis: {
|
customEmojis: {
|
||||||
required: false
|
required: false,
|
||||||
|
default: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
url: null,
|
url: null,
|
||||||
alt: null,
|
char: null,
|
||||||
name: null
|
customEmoji: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => this.exec());
|
computed: {
|
||||||
|
alt(): string {
|
||||||
|
return this.customEmoji ? this.customEmoji.name : this.char;
|
||||||
|
},
|
||||||
|
|
||||||
|
useOsDefaultEmojis(): boolean {
|
||||||
|
return this.$store.state.device.useOsDefaultEmojis;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
exec() {
|
created() {
|
||||||
const { emoji, raw, customEmojis } = this;
|
if (this.name) {
|
||||||
this.name = emoji ? `:${emoji}:` : raw;
|
const customEmoji = this.customEmojis.find(x => x.name == this.name);
|
||||||
if (!raw && customEmojis && customEmojis.length) {
|
if (customEmoji) {
|
||||||
this.url = customEmojis.find(x => findCustomEmoji(x, emoji)).url;
|
this.customEmoji = customEmoji;
|
||||||
} else { // *MEM: `customEmojis` always has a emoji named `emoji`
|
this.url = customEmoji.url;
|
||||||
const char = raw || lib[emoji] && lib[emoji].char;
|
} else {
|
||||||
if (char) {
|
const emoji = lib[this.name];
|
||||||
this.url = `https://twemoji.maxcdn.com/2/svg/${char.codePointAt(0).toString(16)}.svg`;
|
if (emoji) {
|
||||||
this.alt = char;
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-emoji
|
.fvgwvorwhxigeolkkrcderjzcawqrscl
|
||||||
height 2.5em
|
height 1em
|
||||||
vertical-align middle
|
|
||||||
|
&.custom
|
||||||
|
height 2.5em
|
||||||
|
vertical-align middle
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -187,10 +187,10 @@ export default Vue.component('misskey-flavored-markdown', {
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'emoji': {
|
case 'emoji': {
|
||||||
const { emoji, raw } = token;
|
const { emoji, name } = token;
|
||||||
const { customEmojis } = this;
|
const { customEmojis } = this;
|
||||||
return [createElement('mk-emoji', {
|
return [createElement('mk-emoji', {
|
||||||
attrs: { emoji, raw },
|
attrs: { emoji, name },
|
||||||
props: { customEmojis }
|
props: { customEmojis }
|
||||||
})];
|
})];
|
||||||
}
|
}
|
||||||
|
|
|
@ -145,6 +145,7 @@ class Autocomplete {
|
||||||
} else {
|
} else {
|
||||||
// サジェスト要素作成
|
// サジェスト要素作成
|
||||||
this.suggestion = new MkAutocomplete({
|
this.suggestion = new MkAutocomplete({
|
||||||
|
parent: this.vm,
|
||||||
propsData: {
|
propsData: {
|
||||||
textarea: this.textarea,
|
textarea: this.textarea,
|
||||||
complete: this.complete,
|
complete: this.complete,
|
||||||
|
|
|
@ -115,6 +115,7 @@
|
||||||
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
|
<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="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
|
||||||
<ui-switch v-model="showFullAcct">%i18n:common.show-full-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="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
|
@ -324,6 +325,11 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
useOsDefaultEmojis: {
|
||||||
|
get() { return this.$store.state.device.useOsDefaultEmojis; },
|
||||||
|
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
|
||||||
|
},
|
||||||
|
|
||||||
reduceMotion: {
|
reduceMotion: {
|
||||||
get() { return this.$store.state.device.reduceMotion; },
|
get() { return this.$store.state.device.reduceMotion; },
|
||||||
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
|
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
|
||||||
|
|
|
@ -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="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="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
|
||||||
<ui-switch v-model="showFullAcct">%i18n:common.show-full-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="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
|
||||||
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</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>
|
<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 }); }
|
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: {
|
reduceMotion: {
|
||||||
get() { return this.$store.state.device.reduceMotion; },
|
get() { return this.$store.state.device.reduceMotion; },
|
||||||
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
|
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
|
||||||
|
|
|
@ -62,7 +62,8 @@ const defaultDeviceSettings = {
|
||||||
deckColumnAlign: 'center',
|
deckColumnAlign: 'center',
|
||||||
mobileNotificationPosition: 'bottom',
|
mobileNotificationPosition: 'bottom',
|
||||||
deckTemporaryColumn: null,
|
deckTemporaryColumn: null,
|
||||||
deckDefault: false
|
deckDefault: false,
|
||||||
|
useOsDefaultEmojis: false
|
||||||
};
|
};
|
||||||
|
|
||||||
export default (os: MiOS) => new Vuex.Store({
|
export default (os: MiOS) => new Vuex.Store({
|
||||||
|
|
|
@ -8,27 +8,26 @@ export type TextElementEmoji = {
|
||||||
type: 'emoji';
|
type: 'emoji';
|
||||||
content: string;
|
content: string;
|
||||||
emoji?: string;
|
emoji?: string;
|
||||||
raw?: string;
|
name?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function(text: string) {
|
export default function(text: string) {
|
||||||
const name = text.match(/^:([a-zA-Z0-9+_-]+):/);
|
const name = text.match(/^:([a-zA-Z0-9+_-]+):/);
|
||||||
if (name) {
|
if (name) {
|
||||||
const [content, emoji] = name;
|
return {
|
||||||
|
type: 'emoji',
|
||||||
|
content: name[0],
|
||||||
|
name: name[1]
|
||||||
|
} as TextElementEmoji;
|
||||||
|
}
|
||||||
|
const unicode = text.match(emojiRegex);
|
||||||
|
if (unicode) {
|
||||||
|
const [content, emoji] = unicode;
|
||||||
return {
|
return {
|
||||||
type: 'emoji',
|
type: 'emoji',
|
||||||
content,
|
content,
|
||||||
emoji
|
emoji
|
||||||
} as TextElementEmoji;
|
} as TextElementEmoji;
|
||||||
}
|
}
|
||||||
const unicode = text.match(emojiRegex);
|
|
||||||
if (unicode) {
|
|
||||||
const [content, raw] = unicode;
|
|
||||||
return {
|
|
||||||
type: 'emoji',
|
|
||||||
content,
|
|
||||||
raw
|
|
||||||
} as TextElementEmoji;
|
|
||||||
}
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,5 +2,5 @@ import parse from '../../../mfm/parse';
|
||||||
|
|
||||||
export default function(text: string) {
|
export default function(text: string) {
|
||||||
if (!text) return [];
|
if (!text) return [];
|
||||||
return parse(text).filter(t => t.type === 'emoji').map(t => (t as any).emoji);
|
return parse(text).filter(t => t.type === 'emoji' && t.name).map(t => (t as any).name);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,9 +8,7 @@ import Note, { INote } from '../../../models/note';
|
||||||
import User from '../../../models/user';
|
import User from '../../../models/user';
|
||||||
import toHtml from '../misc/get-note-html';
|
import toHtml from '../misc/get-note-html';
|
||||||
import parseMfm from '../../../mfm/parse';
|
import parseMfm from '../../../mfm/parse';
|
||||||
import getEmojiNames from '../misc/get-emoji-names';
|
|
||||||
import Emoji, { IEmoji } from '../../../models/emoji';
|
import Emoji, { IEmoji } from '../../../models/emoji';
|
||||||
import { unique } from '../../../prelude/array';
|
|
||||||
|
|
||||||
export default async function renderNote(note: INote, dive = true): Promise<any> {
|
export default async function renderNote(note: INote, dive = true): Promise<any> {
|
||||||
const promisedFiles: Promise<IDriveFile[]> = note.fileIds
|
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 content = toHtml(Object.assign({}, note, { text }));
|
||||||
|
|
||||||
const emojiNames = unique(getEmojiNames(content));
|
const emojis = await getEmojis(note.emojis);
|
||||||
const emojis = await getEmojis(emojiNames);
|
|
||||||
const apemojis = emojis.map(emoji => renderEmoji(emoji));
|
const apemojis = emojis.map(emoji => renderEmoji(emoji));
|
||||||
|
|
||||||
const tag = [
|
const tag = [
|
||||||
|
|
|
@ -456,8 +456,8 @@ function extractHashtags(tokens: ReturnType<typeof parse>): string[] {
|
||||||
function extractEmojis(tokens: ReturnType<typeof parse>): string[] {
|
function extractEmojis(tokens: ReturnType<typeof parse>): string[] {
|
||||||
// Extract emojis
|
// Extract emojis
|
||||||
const emojis = tokens
|
const emojis = tokens
|
||||||
.filter(t => t.type == 'emoji')
|
.filter(t => t.type == 'emoji' && t.name)
|
||||||
.map(t => (t as TextElementEmoji).emoji)
|
.map(t => (t as TextElementEmoji).name)
|
||||||
.filter(emoji => emoji.length <= 100);
|
.filter(emoji => emoji.length <= 100);
|
||||||
|
|
||||||
return unique(emojis);
|
return unique(emojis);
|
||||||
|
|
|
@ -182,14 +182,14 @@ describe('Text', () => {
|
||||||
it('emoji', () => {
|
it('emoji', () => {
|
||||||
const tokens1 = analyze(':cat:');
|
const tokens1 = analyze(':cat:');
|
||||||
assert.deepEqual([
|
assert.deepEqual([
|
||||||
{ type: 'emoji', content: ':cat:', emoji: 'cat'}
|
{ type: 'emoji', content: ':cat:', name: 'cat'}
|
||||||
], tokens1);
|
], tokens1);
|
||||||
|
|
||||||
const tokens2 = analyze(':cat::cat::cat:');
|
const tokens2 = analyze(':cat::cat::cat:');
|
||||||
assert.deepEqual([
|
assert.deepEqual([
|
||||||
{ type: 'emoji', content: ':cat:', emoji: 'cat'},
|
{ type: 'emoji', content: ':cat:', name: 'cat'},
|
||||||
{ type: 'emoji', content: ':cat:', emoji: 'cat'},
|
{ type: 'emoji', content: ':cat:', name: 'cat'},
|
||||||
{ type: 'emoji', content: ':cat:', emoji: 'cat'}
|
{ type: 'emoji', content: ':cat:', name: 'cat'}
|
||||||
], tokens2);
|
], tokens2);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue