forked from mirror/misskey
improve(client): Improve emoji autocomplete
This commit is contained in:
parent
c88ea7150c
commit
0627df8116
@ -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に
|
||||||
- 依存関係の更新
|
- 依存関係の更新
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user