Emoji picker suggestions are unexpected when using ":)" and ":D"

[jancborchardt]

When typing :) and :D, two very common text emojis, the suggestions by the emoji picker are very off. And when you just press "enter", you get very misleading emojis as a result:

:)	:D

Expected suggestions:

• :) = 🙂 :slightly_smiling_face:
• :D = 😄 :smile:

[jancborchardt]

In a different issue @nickvergessen mentioned to not replace :) or :D with emojis but keep them as is.

Either is fine with me design-wise, as long as the completely-wrong-emoji issue is fixed. :D

[jancborchardt]

cc @max-nextcloud @mejo- one of you worked on the emoji picker, right? Maybe you know a possible solution here?

[nickvergessen]

In a different issue nickvergessen mentioned to not replace :) or :D with emojis but keep them as is.

The question is how. The problem origins from writing the emoji and then using "Enter" to send the chat message. But since you did type a : the emoji picker is open and basically hitting enter confirms the emoji and that is also the totally expected result (for any other combination)
So you are already required to hit enter twice, once to pick the emoji and once to then afterwards submit the message.

I don't know how the emoji autocomplete works, maybe we can extend the list and add manual additional entries to it for some text based ones and make the plain text :) the first entry for those and Enter at least picks the right emoji.

Apart from :) and :D there are at least 3 more, which at least affect me regularly:

• :(
• :P
• :S

[mejo-]

Emoji picker already has the required data available, searching for :), :D and alike gives the correct results. See https://github.com/serebrov/emoji-mart-vue#emoticons.

The problem is that we actually search for ) or D, because we strip the : from the search string. We might instead always search for the full :<string> search string instead and then add additional results with the : stripped. This should work as searching for something like :smile doesn't reveal results anyway.

The relevant place in code would be here: https://github.com/nextcloud/nextcloud-vue/blob/4690b32d23a451c8a67d711c8066b191008f2050/src/functions/emoji/emoji.js#L36

The following code change should do the trick:

let results = index.search(`:${query}`, maxResults)
if (results.length < maxResults) {
    results = results.concat(index.search(query, maxResults - results.length))
}
return results

[mejo-]

I can prepare a PR next week if others think this is a viable solution.

[mejo-]

I went ahead and created a (untested) PR: #3923

[nickvergessen]

I'll send a counter proposal soon to actually autocomplete the text as mentioned above instead of posting emojis
Bildschirmaufzeichnung vom 2023-03-24, 07-16-01.webm