mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-09-13 06:17:26 +00:00
feat: make text expander aware of custom emojis
The old MDE editor is aware of custom emojis and shows them as suggestions, but the new text expander is not aware of them and seems to re-implement some logic. Simplify it by using what `emoji.js` already provides. Custom emojis require a bit more work to get shown correctly (HTML and adding a `gap` to fake a space).
This commit is contained in:
parent
9a8bdc6cbd
commit
fe5f16205f
3 changed files with 17 additions and 15 deletions
|
@ -1,5 +1,6 @@
|
|||
import {matchEmoji, matchMention} from '../../utils/match.js';
|
||||
import {emojiString} from '../emoji.js';
|
||||
import {emojiHTML, emojiString} from '../emoji.js';
|
||||
const {customEmojis} = window.config;
|
||||
|
||||
export function initTextExpander(expander) {
|
||||
expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
|
||||
|
@ -10,11 +11,16 @@ export function initTextExpander(expander) {
|
|||
const ul = document.createElement('ul');
|
||||
ul.classList.add('suggestions');
|
||||
for (const name of matches) {
|
||||
const emoji = emojiString(name);
|
||||
const li = document.createElement('li');
|
||||
li.setAttribute('role', 'option');
|
||||
li.setAttribute('data-value', emoji);
|
||||
li.textContent = `${emoji} ${name}`;
|
||||
li.setAttribute('data-value', emojiString(name));
|
||||
if (customEmojis.has(name)) {
|
||||
li.style.gap = '0.25rem';
|
||||
li.innerHTML = emojiHTML(name);
|
||||
li.append(name);
|
||||
} else {
|
||||
li.textContent = `${emojiString(name)} ${name}`;
|
||||
}
|
||||
ul.append(li);
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ for (const {emoji, aliases} of emojis) {
|
|||
}
|
||||
|
||||
export const emojiKeys = Object.keys(tempMap).sort((a, b) => {
|
||||
if (b === '+1' && a === '-1') return 1;
|
||||
if (a === '+1' || a === '-1') return -1;
|
||||
if (b === '+1' || b === '-1') return 1;
|
||||
return a.localeCompare(b);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import emojis from '../../../assets/emoji.json';
|
||||
import {emojiKeys} from '../features/emoji.js';
|
||||
|
||||
const maxMatches = 6;
|
||||
|
||||
|
@ -9,19 +9,14 @@ function sortAndReduce(map) {
|
|||
|
||||
export function matchEmoji(queryText) {
|
||||
const query = queryText.toLowerCase().replaceAll('_', ' ');
|
||||
if (!query) return emojis.slice(0, maxMatches).map((e) => e.aliases[0]);
|
||||
if (!query) return emojiKeys.slice(0, maxMatches);
|
||||
|
||||
// results is a map of weights, lower is better
|
||||
const results = new Map();
|
||||
for (const {aliases} of emojis) {
|
||||
const mainAlias = aliases[0];
|
||||
for (const [aliasIndex, alias] of aliases.entries()) {
|
||||
const index = alias.replaceAll('_', ' ').indexOf(query);
|
||||
for (const emojiKey of emojiKeys) {
|
||||
const index = emojiKey.replaceAll('_', ' ').indexOf(query);
|
||||
if (index === -1) continue;
|
||||
const existing = results.get(mainAlias);
|
||||
const rankedIndex = index + aliasIndex;
|
||||
results.set(mainAlias, existing ? existing - rankedIndex : rankedIndex);
|
||||
}
|
||||
results.set(emojiKey, index);
|
||||
}
|
||||
|
||||
return sortAndReduce(results);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue