git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Improve emoji and mention matching (#24255)

Browse source 
Prioritize matches that start with the given text, then matches that
contain the given text.

I wanted to add a heart emoji on a pull request comment so I started
writing `:`, `h`, `e`, `a`, `r` (at this point I still couldn't find the
heart), `t`... The heart was not on the list, that's weird - it feels
like I made a typo or a mistake. This fixes that.

This also feels more like GitHub's emoji auto-complete.

# Before

![image](https://user-images.githubusercontent.com/20454870/233630750-bd0a1b76-33d0-41d4-9218-a37b670c42b0.png)

# After

![image](https://user-images.githubusercontent.com/20454870/233775128-05e67fc1-e092-4025-b6f7-1fd8e5f71e87.png)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Yarden Shoham 2023-04-22 18:32:34 +03:00 • committed by GitHub
parent ce9c1ddc4c
commit 3cc87370c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 103 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web_src/js/features/comp/ComboMarkdownEditor.js
View file

@ -5,11 +5,11 @@ import {attachTribute} from '../tribute.js';
import {hideElem, showElem, autosize} from '../../utils/dom.js';
import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
import {emojiKeys, emojiString} from '../emoji.js';
import {emojiString} from '../emoji.js';
import {renderPreviewPanelContent} from '../repo-editor.js';
import {matchEmoji, matchMention} from '../../utils/match.js';
let elementIdCounter = 0;
const maxExpanderMatches = 6;
/**
* validate if the given textarea is non-empty.
@ -106,14 +106,7 @@ class ComboMarkdownEditor {
const expander = this.container.querySelector('text-expander');
expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
if (key === ':') {
const matches = [];
const textLowerCase = text.toLowerCase();
for (const name of emojiKeys) {
if (name.toLowerCase().includes(textLowerCase)) {
matches.push(name);
if (matches.length >= maxExpanderMatches) break;
}
}
const matches = matchEmoji(text);
if (!matches.length) return provide({matched: false});
const ul = document.createElement('ul');
@ -129,14 +122,7 @@ class ComboMarkdownEditor {
provide({matched: true, fragment: ul});
} else if (key === '@') {
const matches = [];
const textLowerCase = text.toLowerCase();
for (const obj of window.config.tributeValues) {
if (obj.key.toLowerCase().includes(textLowerCase)) {
matches.push(obj);
if (matches.length >= maxExpanderMatches) break;
}
}
const matches = matchMention(text);
if (!matches.length) return provide({matched: false});
const ul = document.createElement('ul');