From ded328fb43adda0ca61946de1ce1e94bc8e37b1d Mon Sep 17 00:00:00 2001 From: おさむのひと <46447427+samunohito@users.noreply.github.com> Date: Thu, 23 Nov 2023 08:13:51 +0900 Subject: 絵文字のオートコンプリート強化の対応 (#12365) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 前方一致・部分一致でなくても近似値でヒットするように * fix CHANGELOG.md * for of に変更 --------- Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com> --- .../frontend/src/components/MkAutocomplete.vue | 100 ++++++++++++++++----- 1 file changed, 77 insertions(+), 23 deletions(-) (limited to 'packages/frontend/src/components/MkAutocomplete.vue') diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue index 7e0c219045..a0f4961116 100644 --- a/packages/frontend/src/components/MkAutocomplete.vue +++ b/packages/frontend/src/components/MkAutocomplete.vue @@ -242,29 +242,7 @@ function exec() { return; } - const matched: EmojiDef[] = []; - const max = 30; - - emojiDb.value.some(x => { - if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x); - return matched.length === max; - }); - - if (matched.length < max) { - emojiDb.value.some(x => { - if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x); - return matched.length === max; - }); - } - - if (matched.length < max) { - emojiDb.value.some(x => { - if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x); - return matched.length === max; - }); - } - - emojis.value = matched; + emojis.value = emojiAutoComplete(props.q, emojiDb.value); } else if (props.type === 'mfmTag') { if (!props.q || props.q === '') { mfmTags.value = MFM_TAGS; @@ -275,6 +253,82 @@ function exec() { } } +type EmojiScore = { emoji: EmojiDef, score: number }; + +function emojiAutoComplete(query: string | null, emojiDb: EmojiDef[], max = 30): EmojiDef[] { + if (!query) { + return []; + } + + const matched = new Map(); + + // 前方一致（エイリアスなし） + emojiDb.some(x => { + if (x.name.startsWith(query) && !x.aliasOf) { + matched.set(x.name, { emoji: x, score: query.length }); + } + return matched.size === max; + }); + + // 前方一致（エイリアス込み） + if (matched.size < max) { + emojiDb.some(x => { + if (x.name.startsWith(query)) { + matched.set(x.name, { emoji: x, score: query.length }); + } + return matched.size === max; + }); + } + + // 部分一致（エイリアス込み） + if (matched.size < max) { + emojiDb.some(x => { + if (x.name.includes(query)) { + matched.set(x.name, { emoji: x, score: query.length }); + } + return matched.size === max; + }); + } + + // 簡易あいまい検索 + if (matched.size < max) { + const queryChars = [...query]; + const hitEmojis = new Map(); + + for (const x of emojiDb) { + // クエリ文字列の1文字単位で絵文字名にヒットするかを見る + // ただし、過剰に検出されるのを防ぐためクエリ文字列に登場する順番で絵文字名を走査する + + let queryCharHitPos = 0; + let queryCharHitCount = 0; + for (let idx = 0; idx < queryChars.length; idx++) { + queryCharHitPos = x.name.indexOf(queryChars[idx], queryCharHitPos); + if (queryCharHitPos <= -1) { + break; + } + + queryCharHitCount++; + } + + // ヒット数が少なすぎると検索結果が汚れるので調節する + if (queryCharHitCount > 2) { + hitEmojis.set(x.name, { emoji: x, score: queryCharHitCount }); + } + } + + // ヒットしたものを全部追加すると雑多になるので、先頭の6件程度だけにしておく（6件＝オートコンプリートのポップアップのサイズ分） + [...hitEmojis.values()] + .sort((x, y) => y.score - x.score) + .slice(0, 6) + .forEach(it => matched.set(it.emoji.name, it)); + } + + return [...matched.values()] + .sort((x, y) => y.score - x.score) + .slice(0, max) + .map(it => it.emoji); +} + function onMousedown(event: Event) { if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close(); } -- cgit v1.2.3-freya From da3064343bfc76e8402adf5cd5ed68824c1e42da Mon Sep 17 00:00:00 2001 From: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com> Date: Fri, 24 Nov 2023 06:37:06 +0900 Subject: enhance(frontend): 絵文字のオートコンプリートのアルゴリズムの改善 (MisskeyIO#261) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 実際は同じ絵文字なら重複してサジェストに出ないように * エイリアスではない絵文字>前方一致>部分一致>あいまい検索順で表示されるようになるように --- .../frontend/src/components/MkAutocomplete.vue | 40 ++++++++++------------ 1 file changed, 18 insertions(+), 22 deletions(-) (limited to 'packages/frontend/src/components/MkAutocomplete.vue') diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue index a0f4961116..c1fcbd7ac1 100644 --- a/packages/frontend/src/components/MkAutocomplete.vue +++ b/packages/frontend/src/components/MkAutocomplete.vue @@ -265,7 +265,7 @@ function emojiAutoComplete(query: string | null, emojiDb: EmojiDef[], max = 30): // 前方一致（エイリアスなし） emojiDb.some(x => { if (x.name.startsWith(query) && !x.aliasOf) { - matched.set(x.name, { emoji: x, score: query.length }); + matched.set(x.name, { emoji: x, score: query.length + 1 }); } return matched.size === max; }); @@ -273,8 +273,8 @@ function emojiAutoComplete(query: string | null, emojiDb: EmojiDef[], max = 30): // 前方一致（エイリアス込み） if (matched.size < max) { emojiDb.some(x => { - if (x.name.startsWith(query)) { - matched.set(x.name, { emoji: x, score: query.length }); + if (x.name.startsWith(query) && !matched.has(x.aliasOf ?? x.name)) { + matched.set(x.aliasOf ?? x.name, { emoji: x, score: query.length }); } return matched.size === max; }); @@ -283,36 +283,32 @@ function emojiAutoComplete(query: string | null, emojiDb: EmojiDef[], max = 30): // 部分一致（エイリアス込み） if (matched.size < max) { emojiDb.some(x => { - if (x.name.includes(query)) { - matched.set(x.name, { emoji: x, score: query.length }); + if (x.name.includes(query) && !matched.has(x.aliasOf ?? x.name)) { + matched.set(x.aliasOf ?? x.name, { emoji: x, score: query.length - 1 }); } return matched.size === max; }); } - // 簡易あいまい検索 - if (matched.size < max) { + // 簡易あいまい検索（3文字以上） + if (matched.size < max && query.length > 3) { const queryChars = [...query]; const hitEmojis = new Map(); for (const x of emojiDb) { - // クエリ文字列の1文字単位で絵文字名にヒットするかを見る - // ただし、過剰に検出されるのを防ぐためクエリ文字列に登場する順番で絵文字名を走査する - - let queryCharHitPos = 0; - let queryCharHitCount = 0; - for (let idx = 0; idx < queryChars.length; idx++) { - queryCharHitPos = x.name.indexOf(queryChars[idx], queryCharHitPos); - if (queryCharHitPos <= -1) { - break; - } - - queryCharHitCount++; + // 文字列の位置を進めながら、クエリの文字を順番に探す + + let pos = 0; + let hit = 0; + for (const c of queryChars) { + pos = x.name.indexOf(c, pos); + if (pos <= -1) break; + hit++; } - // ヒット数が少なすぎると検索結果が汚れるので調節する - if (queryCharHitCount > 2) { - hitEmojis.set(x.name, { emoji: x, score: queryCharHitCount }); + // 半分以上の文字が含まれていればヒットとする + if (hit > Math.ceil(queryChars.length / 2) && hit - 2 > (matched.get(x.aliasOf ?? x.name)?.score ?? 0)) { + hitEmojis.set(x.aliasOf ?? x.name, { emoji: x, score: hit - 2 }); } } -- cgit v1.2.3-freya From 38b82b85829bd198b7b23ae1a4aacb073fe11ff1 Mon Sep 17 00:00:00 2001 From: 1STEP621 <86859447+1STEP621@users.noreply.github.com> Date: Mon, 18 Dec 2023 14:59:55 +0900 Subject: Enhance(frontend): Shift+Tabで前の補完候補が選択できるように (#12704) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Shift+Tabで前の補完候補が選択できるように * update CHANGELOG.md --- CHANGELOG.md | 1 + packages/frontend/src/components/MkAutocomplete.vue | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) (limited to 'packages/frontend/src/components/MkAutocomplete.vue') diff --git a/CHANGELOG.md b/CHANGELOG.md index cf3b56e602..0d6df0a167 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -63,6 +63,7 @@ - MFMでコードブロックを利用する際に意図しないハイライトが起こらないようになりました - 逆に、MFMでコードハイライトを利用したい際は言語を明示的に指定する必要があります （例: ` ```js ` → Javascript, ` ```ais ` → AiScript） +- Enhance: 絵文字などのオートコンプリートでShift+Tabを押すと前の候補を選択できるように - Fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367 - Fix: コードエディタが正しく表示されない問題を修正 diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue index c1fcbd7ac1..494d120a93 100644 --- a/packages/frontend/src/components/MkAutocomplete.vue +++ b/packages/frontend/src/components/MkAutocomplete.vue @@ -359,12 +359,25 @@ function onKeydown(event: KeyboardEvent) { } break; - case 'Tab': case 'ArrowDown': cancel(); selectNext(); break; + case 'Tab': + if (event.shiftKey) { + if (select.value !== -1) { + cancel(); + selectPrev(); + } else { + props.close(); + } + } else { + cancel(); + selectNext(); + } + break; + default: event.stopPropagation(); props.textarea.focus(); -- cgit v1.2.3-freya