Add emoji autocompletion (#987)

[mejo-]

Adds emoji autocompletion by typing :<search string>.

It utilizes the emoji functions from nextcloud-vue[1] and the TipTap
suggestions extension.

[1] nextcloud-libraries/nextcloud-vue#1474

Signed-off-by: Jonas Meurer jonas@freesources.org

Screencasts

• Resolves: Make it easy to insert emojis #987
• Target version: master

Summary

[mejo-]

As discussed, I first looked into opportunities to outsource the emoji autocompletion into nextcloud-vue components. But unfortunately that's not really an option - at least I didn't see a good one.

The nextcloud-vue implementation would be specific to the RichContenteditable component and our implementation utilizes the TipTap Suggestions extension.

I'd be happy to learn about others' ideas on how to merge (parts of) the two approaches though 😊

[mejo-]

@nimishavijay and @jancborchardt feel free to drop some early feedback as well 😊

[julien-nc]

🚀 Wow it is very nice already!

The nextcloud-vue implementation would be specific to the RichContenteditable component and our implementation utilizes the TipTap Suggestions extension.

I guess it would require to implement something generic enough so it could be used in RichContenteditable and as a replacement of your EmojiSuggestions component.
I think it would be nicer to factorize the work on text suggestion.
I'll have a look at our Vue lib soonish.

When there is no suggestion, the TipTap emoji plugin sometimes provides an emojiRect with x==0 and y==0 which causes the suggestion box to jump to the top left corner. I didn't dig too deep but I feel this could be avoided with a few checks.

[nimishavijay]

Looking super nice! Pretty much done looks-wise :D
Some questions I have:

• does it auto complete on pressing tab or enter or both? Ideally it should be both
• is the list of suggested emojis limited to a certain number? I'd say something around 5-6 would work
• do you think we need to impose a max width on mobile and ellipsise so it doesn't extend beyond the screen?

[julien-nc]

@nimishavijay

• does it auto complete on pressing tab or enter or both? Ideally it should be both

The suggestion dropdown appears right after typing ":". You can then change the highlighted one with the arrows and select one with enter or by clicking it. Pressing the tab has no effect on the dropdown, it changes the focus to other stuff in the page.

• is the list of suggested emojis limited to a certain number? I'd say something around 5-6 would work

Right now it's 5.

• do you think we need to impose a max width on mobile and ellipsise so it doesn't extend beyond the screen?

Sounds good, yes.

[mejo-]

When there is no suggestion, the TipTap emoji plugin sometimes provides an emojiRect with x==0 and y==0 which causes the suggestion box to jump to the top left corner. I didn't dig too deep but I feel this could be avoided with a few checks.

I digged a bit deeper here. The problem is that getBoundingClientRect() on the emojiSuggestion element returns positions (0, 0) for a short time in some cases. The only solution I could find so far is to cache the coordinates and to not update them in case of (0, 0): b5feddf

This works well in my tests, but not sure if it's the smartest solution. Let me know what you think 😬

[mejo-]

* does it auto complete on pressing tab or enter or both? Ideally it should be both

Good point, I'll make it work on <Tab> as well.

* is the list of suggested emojis limited to a certain number? I'd say something around 5-6 would work

As @eneiluj said, it's limited to five for now (Github also shows five).

* do you think we need to impose a max width on mobile and ellipsise so it doesn't extend beyond the screen?

Good idea. What would be a good max-width on mobile?

[juliusknorr]

When there is no suggestion, the TipTap emoji plugin sometimes provides an emojiRect with x==0 and y==0 which causes the suggestion box to jump to the top left corner. I didn't dig too deep but I feel this could be avoided with a few checks.

I digged a bit deeper here. The problem is that getBoundingClientRect() on the emojiSuggestion element returns positions (0, 0) for a short time in some cases. The only solution I could find so far is to cache the coordinates and to not update them in case of (0, 0): b5feddf

This works well in my tests, but not sure if it's the smartest solution. Let me know what you think grimacing

Seems good and a similar approach is used in https://github.com/ueberdosis/tiptap/blob/v1/examples/Components/Routes/Suggestions/index.vue#L230

[mejo-]

* do you think we need to impose a max width on mobile and ellipsise so it doesn't extend beyond the screen?

I went with max-width: 90wv on mobile as that seemed like the most sensible value to me.

Also did some further CSS/positioning improvements, see 95e2583 for details. I updated the screencast above accordingly.

[mejo-]

Supress further marks in Emoji nodes

So I looked into the problem of marks being applied within emoji search and came up with #1964, which is the proper fix here in my eyes. This also fixes the problem for inserting e.g. URLs with two underscores etc. Therefore I removed the quoted todo as it's out of scope for this PR.

[azul]

I did not take a look at the code yet... but i am super excited to see this! Just wanted to share the excitement. And yes... i know there are emoji reactions for this... sometimes they are not enough though ;)

[julien-nc]

I digged a bit deeper here. The problem is that getBoundingClientRect() on the emojiSuggestion element returns positions (0, 0) for a short time in some cases. The only solution I could find so far is to cache the coordinates and to not update them in case of (0, 0): b5feddf

This works well in my tests, but not sure if it's the smartest solution. Let me know what you think grimacing

This fix makes sense. It now works very nicely 🚀.

[julien-nc]

Awesome!
As far as I've seen, in the suggestion list, when there's no query, only the last used emoji is added in the end. It would be nice to have the 3 last used or the 3 most used. What do you think? Does it make sense? Is it even possible/easy to implement?

[juliusknorr]

@nextcloud/vue 5.0.0 was merged #2178

[mejo-]

The only issue i ran into is that it's right now impossible to insert two emojis using autocompletion directly after each other. You need to put a space in between otherwise the dialog will not open.

For other keyboard shortcuts it makes sense not to be triggered within words. If you have text_with_underscores we don't want the with to become italic. However we're not converting :heart: to a heart emoji unless one presses tab or enter. So i think opening the emoji selector even when typing a word would be okay and would allow adding multiple emojis in a row or directly following a letterexclamation

An alternative would be to always append a space when adding an emoji. That's also, what others do. What do you think about that?

[max-nextcloud]

An alternative would be to always append a space when adding an emoji. That's also, what others do. What do you think about that?

That's a great idea. Avoids opening the emoji picker when ending a word with a colon like this:
Also should be fairly easy implementationwise. :D

[mejo-]

I put some more work into the PR and think that it's ready to be merged now.

In particular, implementing automatic scrolling when navigating through the suggestion list was tricky and to be honest I'm a bit proud about the result 😊 b05c62b

Also, as discussed with @max-nextcloud, every inserted emoji now always gets a whitespace appended, to make it easy to insert several emojis in a row.

outdated

[max-nextcloud]

Code looks very clean. Will give it a try and then merge.

[max-nextcloud]

/compile amend /

[juliusknorr]

Works like a charm and also nice and clean from a code perspective 👍

[max-nextcloud]

Trying to fix the jest issue. I ran into something similar before.

• reproduce it localy
• figure out what its missing

maybe add to transformIgnorePatterns?

Okay... i think i found the underlying problem. There are some imports using src paths in @nextcloud/vue which should be using the package itself instead.

Using a locally linked @nextcloud/vue with these changes fixed the issue for me:

diff --git a/src/functions/emoji/emoji.js b/src/functions/emoji/emoji.js
index e54e8a28..126d327d 100644
--- a/src/functions/emoji/emoji.js
+++ b/src/functions/emoji/emoji.js
@@ -21,8 +21,7 @@
  */
 
 import data from 'emoji-mart-vue-fast/data/all.json'
-import { EmojiIndex } from 'emoji-mart-vue-fast/src'
-import frequently from 'emoji-mart-vue-fast/src/utils/frequently'
+import { EmojiIndex, frequently } from 'emoji-mart-vue-fast'
 
 // export const allEmojis = index.buildIndex()

The npm link has a sideeffect of not installing @babel/polyfill anymore since it's a nextcloud vue dependency - but not listed in our own package.json. It's deprecated anyway. So we should replace its only use in our code which is in tests. I'll add a commit with that.

[max-nextcloud]

nextcloud-libraries/nextcloud-vue#2521 has the upstream fix. We'll have to wait for a release of @nextcloud/vue to get this in.