diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 10d566fc3..f8298c301 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -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: 'これは開発ビルドです。本番環境で使用しないでください。' diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue index 3f3cd171e..4cf44a23a 100644 --- a/src/client/app/common/views/components/autocomplete.vue +++ b/src/client/app/common/views/components/autocomplete.vue @@ -14,7 +14,8 @@
  1. - + + {{ emoji.emoji }} ({{ emoji.aliasOf }}) @@ -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 }); }); } diff --git a/src/client/app/common/views/components/emoji.vue b/src/client/app/common/views/components/emoji.vue new file mode 100644 index 000000000..106abecc7 --- /dev/null +++ b/src/client/app/common/views/components/emoji.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 3b20d0753..5665ef88d 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -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); diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts index 68f3aeed1..2a0a2b6f6 100644 --- a/src/client/app/common/views/components/misskey-flavored-markdown.ts +++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts @@ -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,24 +187,15 @@ 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', { - attrs: { - src: customEmoji.url, - alt: token.emoji, - title: token.emoji, - style: 'height: 2.5em; vertical-align: middle;' - } - })]; + return [createElement('mk-emoji', { + attrs: { + 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': { diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts index e3016f0b7..ca0c79212 100644 --- a/src/client/app/common/views/directives/autocomplete.ts +++ b/src/client/app/common/views/directives/autocomplete.ts @@ -145,6 +145,7 @@ class Autocomplete { } else { // サジェスト要素作成 this.suggestion = new MkAutocomplete({ + parent: this.vm, propsData: { textarea: this.textarea, complete: this.complete, diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index 93bef0e61..97743b0bf 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -115,6 +115,7 @@ %i18n:common.reduce-motion% %i18n:@contrasted-acct% %i18n:common.show-full-acct% + %i18n:common.use-os-default-emojis% %i18n:common.i-like-sushi%
    @@ -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 }); } diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 10d13423a..0463d9b3f 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -23,6 +23,7 @@ %i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%) %i18n:@contrasted-acct% %i18n:common.show-full-acct% + %i18n:common.use-os-default-emojis% %i18n:common.i-like-sushi% %i18n:common.disable-animated-mfm% %i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%) @@ -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 }); } diff --git a/src/client/app/store.ts b/src/client/app/store.ts index 7c3a403c8..1108a1c3d 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -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({ diff --git a/src/mfm/parse/elements/emoji.ts b/src/mfm/parse/elements/emoji.ts index 4d66d4c01..de332a706 100644 --- a/src/mfm/parse/elements/emoji.ts +++ b/src/mfm/parse/elements/emoji.ts @@ -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]; - return { - type: 'emoji', - content: emoji, - emoji: match[1] - } as TextElementEmoji; + const name = text.match(/^:([a-zA-Z0-9+_-]+):/); + if (name) { + return { + type: 'emoji', + 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; } diff --git a/src/remote/activitypub/misc/get-emoji-names.ts b/src/remote/activitypub/misc/get-emoji-names.ts deleted file mode 100644 index f744d02fe..000000000 --- a/src/remote/activitypub/misc/get-emoji-names.ts +++ /dev/null @@ -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); -} diff --git a/src/remote/activitypub/renderer/note.ts b/src/remote/activitypub/renderer/note.ts index a2c591de2..2b834f9d2 100644 --- a/src/remote/activitypub/renderer/note.ts +++ b/src/remote/activitypub/renderer/note.ts @@ -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 { const promisedFiles: Promise = note.fileIds @@ -110,8 +108,7 @@ export default async function renderNote(note: INote, dive = true): Promise 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 { if (names == null || names.length < 1) return []; const emojis = await Promise.all( - names.map(async name => { - return await Emoji.findOne({ - name, - host: null - }); - }) + names.map(name => Emoji.findOne({ + name, + host: null + })) ); return emojis.filter(emoji => emoji != null); diff --git a/src/services/note/create.ts b/src/services/note/create.ts index ac8bcf034..b3a3e83d4 100644 --- a/src/services/note/create.ts +++ b/src/services/note/create.ts @@ -456,8 +456,8 @@ function extractHashtags(tokens: ReturnType): string[] { function extractEmojis(tokens: ReturnType): 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); diff --git a/test/mfm.ts b/test/mfm.ts index 1aadcd21e..30b5f0014 100644 --- a/test/mfm.ts +++ b/test/mfm.ts @@ -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', () => {