improve(client): Improve emoji autocomplete

This commit is contained in:
syuilo 2021-08-12 12:41:57 +09:00
parent c88ea7150c
commit 0627df8116
2 changed files with 45 additions and 39 deletions

View file

@ -10,6 +10,8 @@
## 12.86.1 (2021/08/12) ## 12.86.1 (2021/08/12)
### Improvements ### Improvements
- 絵文字オートコンプリートで一文字目は最近使った絵文字をサジェストするように
- 絵文字オートコンプリートのパフォーマンスを改善
- about-misskeyページにドキュメントへのリンクを追加 - about-misskeyページにドキュメントへのリンクを追加
- Docker: Node.jsを16.6.2に - Docker: Node.jsを16.6.2に
- 依存関係の更新 - 依存関係の更新

View file

@ -35,6 +35,7 @@ import { twemojiSvgBase } from '@/misc/twemoji-base';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url'; import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
import { acct } from '@client/filters/user'; import { acct } from '@client/filters/user';
import * as os from '@client/os'; import * as os from '@client/os';
import { instance } from '@client/instance';
type EmojiDef = { type EmojiDef = {
emoji: string; emoji: string;
@ -75,6 +76,36 @@ for (const x of lib) {
emjdb.sort((a, b) => a.name.length - b.name.length); emjdb.sort((a, b) => a.name.length - b.name.length);
//#region Construct Emoji DB
const customEmojis = instance.emojis;
const emojiDefinitions: EmojiDef[] = [];
for (const x of customEmojis) {
emojiDefinitions.push({
name: x.name,
emoji: `:${x.name}:`,
url: x.url,
isCustomEmoji: true
});
if (x.aliases) {
for (const alias of x.aliases) {
emojiDefinitions.push({
name: alias,
aliasOf: x.name,
emoji: `:${x.name}:`,
url: x.url,
isCustomEmoji: true
});
}
}
}
emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
//#endregion
export default defineComponent({ export default defineComponent({
props: { props: {
type: { type: {
@ -124,7 +155,6 @@ export default defineComponent({
emojis: [], emojis: [],
items: [], items: [],
select: -1, select: -1,
emojiDb: [] as EmojiDef[]
} }
}, },
@ -144,36 +174,6 @@ export default defineComponent({
mounted() { mounted() {
this.setPosition(); this.setPosition();
//#region Construct Emoji DB
const customEmojis = this.$instance.emojis;
const emojiDefinitions: EmojiDef[] = [];
for (const x of customEmojis) {
emojiDefinitions.push({
name: x.name,
emoji: `:${x.name}:`,
url: x.url,
isCustomEmoji: true
});
if (x.aliases) {
for (const alias of x.aliases) {
emojiDefinitions.push({
name: alias,
aliasOf: x.name,
emoji: `:${x.name}:`,
url: x.url,
isCustomEmoji: true
});
}
}
}
emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
this.emojiDb = markRaw(emojiDefinitions.concat(emjdb));
//#endregion
this.textarea.addEventListener('keydown', this.onKeydown); this.textarea.addEventListener('keydown', this.onKeydown);
for (const el of Array.from(document.querySelectorAll('body *'))) { for (const el of Array.from(document.querySelectorAll('body *'))) {
@ -203,6 +203,13 @@ export default defineComponent({
complete(type, value) { complete(type, value) {
this.$emit('done', { type, value }); this.$emit('done', { type, value });
this.$emit('closed'); this.$emit('closed');
if (type === 'emoji') {
let recents = this.$store.state.recentlyUsedEmojis;
recents = recents.filter((e: any) => e !== value);
recents.unshift(value);
this.$store.set('recentlyUsedEmojis', recents.splice(0, 32));
}
}, },
setPosition() { setPosition() {
@ -281,29 +288,26 @@ export default defineComponent({
} }
} else if (this.type == 'emoji') { } else if (this.type == 'emoji') {
if (this.q == null || this.q == '') { if (this.q == null || this.q == '') {
this.emojis = this.emojiDb.filter(x => x.isCustomEmoji && !x.aliasOf).sort((a, b) => { // 使
var textA = a.name.toUpperCase(); this.emojis = this.$store.state.recentlyUsedEmojis.map(emoji => emojiDb.find(e => e.emoji == emoji)).filter(x => x != null);
var textB = b.name.toUpperCase();
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});
return; return;
} }
const matched = []; const matched = [];
const max = 30; const max = 30;
this.emojiDb.some(x => { emojiDb.some(x => {
if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(x); if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
return matched.length == max; return matched.length == max;
}); });
if (matched.length < max) { if (matched.length < max) {
this.emojiDb.some(x => { emojiDb.some(x => {
if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x); if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
return matched.length == max; return matched.length == max;
}); });
} }
if (matched.length < max) { if (matched.length < max) {
this.emojiDb.some(x => { emojiDb.some(x => {
if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x); if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
return matched.length == max; return matched.length == max;
}); });