Add emoji autocompletion #1474

skjnldsv · 2020-10-15T07:42:43Z

skjnldsv · 2021-03-08T16:28:27Z

what's missing ?

Joke aside, it's working, just need to be polished for the ui (not show the whole list, maybe show the shortcut? This is also not translated. Anyone can take over, this is mostly for talk, so I'll let you folks decide what needs to be done. cc @jancborchardt

You can all test it in the deploy preview https://deploy-preview-1474--nextcloud-vue-components.netlify.app/

simonspa · 2021-04-24T21:59:53Z

Concerning the UI, this is how Mattermost looks like, something I find very well working for emoji autocompletion:

A list of matching emojis, with a scrollbar if too many, and the emoji "name" / code listed behind the emoji.

skjnldsv · 2021-04-24T22:26:52Z

@jancborchardt are you ok with this design (see comment above) ?

PVince81 · 2021-05-12T08:53:11Z

BUG: styles seems broken currently, might need a rebase first:

also, when typing just ":s" it's very slow/sluggish in my Firefox until I type more letters.
probably this is because it renders too many results until it gets narrowed down, maybe later need to add some virtual scrolling there

PVince81 · 2021-05-12T08:54:34Z

BUG? doesn't autocomplete / replace ascii emojis like ":-)" (could be something for later or needs a DB extension)
BUG: hitting enter key after typing ":-)" doesn't go to the next line, but after other words it does

skjnldsv · 2021-05-12T13:54:58Z

Please take over @PVince81 :)

mejo- · 2021-12-02T16:06:17Z

I put some time into this PR and think that it's in a state to be reviewed now 😊

Instead of building another own emoji data set, the existing dataset by emoji-mart-fast is used. Same for emoji lookup/search functions. This brings unified dataset, defaults and recently used logic between EmojiPicker and emoji autocompletion.

The number of displayed results is limited to five (Github etc. do the same).

I also went with implementing the emojiSearch and addRecent in a seperate functions file, so it can be used again by others (e.g. the Text app, see nextcloud/text#1961).

That's how it looks like at the moment:

Looking forward to your thoughts @skjnldsv @PVince81 @jancborchardt @nimishavijay 😊

mejo- · 2021-12-27T10:36:26Z

* How will this work with other languages?

Unfortunately there's no support for translated emoji names in emoji-mart-vue yet. I'd suggest to discuss this in a separate follow-up issue/PR.

* Purely visual nitpicking, but a couple of pixels of space between the emoji and the text might be a good idea

Agreed. I now added padding-right: 8px to the emoji in the dropdown. See the updated screenshots: #1474 (comment)

* I'm also thinking if it is a good idea to have a scrollbar instead of a hard limit of 5 results, because it might make it easier to find results that are buried down.
  For example, I call this white_check_mark  a tick mark, so if I type `:white_tick` then white_check_mark shows up because it is the top result. But when I type `:tick` the emoji doesn't show up even though it is matched, because it is below the top 5 matched results. Having it scrollable would allow me to find more results.
  Github limits the results to only 5, so I'm thinking if it is such a big deal after all thinking

Not sure about this. We definitely need a limit here, otherwise we would list more than 3000 emojis without a query string. I like the short list of five results and that's what I discovered at Github and Gitlab. Element (the Matrix client) has a limit of 20 emojis (with a scrollbar), Rocketchat lists 10 emojis (with a scrollbar). Notions lists a lot, but just the emojis (without their name) in a table.

Here's how emoji autocompletion would look with a limit of 20 results:

Let me know, which one you prefer 😊

Signed-off-by: Jonas Meurer <[email protected]>

marcoambrosini

I'd also like to have the ability to scroll and In my opinion 10 results are enough.

Also, we could round the results focus feedback a bit more (from 5 to 8px) and increase the padding of the container to 6 or 8px (screenshot is 8)

marcoambrosini

But since this is already super awesome I'm just going to approve, these comments are just tiny details :)

mejo- · 2021-12-28T12:43:05Z

I'd also like to have the ability to scroll and In my opinion 10 results are enough.

Ok, I'll wait for one or two more opinions and raise the limit to 10 if nobody opposed 😊

Also, we could round the results focus feedback a bit more (from 5 to 8px) and increase the padding of the container to 6 or 8px (screenshot is 8)

Agreed! I don't mind to quickly change this if others agree as well 😊

jancborchardt · 2021-12-28T12:59:25Z

Looks very nice! :)

Agree with @marcoambrosini’s feedback on both limit and padding
When the container is scrollable, the height should cut off at the half of an entry rather than at the full entry cause that communicates better that there are more entries. :)
Currently the width of the container changes based on the length of the text inside – we should make it a set width always, then it jumps around less.

mejo- · 2021-12-28T13:54:03Z

* Currently the width of the container changes based on the length of the text inside – we should make it a set width always, then it jumps around less.

Good point 😊 What would a good width be? Currently it has min-width: 180px and max-width: 300px. Changing to min-width: 300px looks a bit too wide, especially on mobile and when searching for short names:

Maybe 250px is a good fixed width:

Signed-off-by: Jonas Meurer <[email protected]>

mejo- · 2021-12-28T16:17:32Z

Ok, did all the requested changes:

Limit to 10 results
border-radius: 8px
Fixed width of 300px for container
padding: 8px for container
Show 5 entries and a half to show scrollbar

Screenshots (and gif) updated: #1474 (comment)

jancborchardt · 2021-12-28T17:07:17Z

Very nice! From the gif the width seems a bit mich for most of the emojis, if it's 200px (and ellipsized text) then all good! 👍

Signed-off-by: Jonas Meurer <[email protected]>

mejo- · 2021-12-28T17:14:27Z

Very nice! From the gif the width seems a bit mich for most of the emojis, if it's 200px (and ellipsized text) then all good! +1

Ok, done: #1474 (comment)

jancborchardt

Nice! :)

skjnldsv · 2021-12-29T06:38:18Z

src/components/RichContenteditable/RichContenteditable.vue

@@ -36,7 +36,7 @@ Note you need to register the [tooltip directive](https://nextcloud-vue-componen
 			:auto-complete="autoComplete"
 			:maxlength="100"
 			:user-data="userData"
-			placeholder="Try mentioning the user Test01"
+			placeholder="Try mentioning user @Test01 or inserting emoji :smile"


Suggested change

placeholder="Try mentioning user @Test01 or inserting emoji :smile"

placeholder="Try mentioning user @Test01 or inserting emoji :smile:"

Typo?

skjnldsv · 2021-12-29T06:38:38Z

src/components/RichContenteditable/RichContenteditable.vue

@@ -46,7 +46,7 @@ Note you need to register the [tooltip directive](https://nextcloud-vue-componen
 			:maxlength="400"
 			:multiline="true"
 			:user-data="userData"
-			placeholder="Try mentioning the user Test01"
+			placeholder="Try mentioning user @Test01 or inserting emoji :smile"


Suggested change

placeholder="Try mentioning user @Test01 or inserting emoji :smile"

placeholder="Try mentioning user @Test01 or inserting emoji :smile:"

Typo?

I decided not to append a colon on purpose. The trailing colon is not needed for autocompletion and makes it harder to read in my opinion. It's more that the prepending colon is the trigger for autocompletion, and then you type your search query (e.g. "smile").

I agree that this might change when we implement automatic conversion of :smile: to an emoji, but I would say that's out of scope here 😊

skjnldsv

So, autocompletion is one thing, but we're not converting the data in emoji when rendering.
If I type the text :smile:, there will be no emoji displayed, right?
I guess that would be a nice second step for the RichEdior :)

This brings unified emoji datasource,defaults and recents for EmojiPicker and the emoji autocompletion feature. This depends on nextcloud-libraries/nextcloud-vue#1474 Signed-off-by: Jonas Meurer <[email protected]>

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 <[email protected]>

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 <[email protected]>

skjnldsv added 2. developing Work in progress feature: rich-contenteditable Related to the rich-contenteditable components labels Oct 15, 2020

skjnldsv self-assigned this Oct 15, 2020

PVince81 mentioned this pull request Oct 15, 2020

shortcut for emoji-picker nextcloud/spreed#4271

Closed

This comment has been minimized.

Sign in to view

skjnldsv force-pushed the feat/emoji branch from 93922e1 to c870406 Compare March 8, 2021 16:24

This comment has been minimized.

Sign in to view

skjnldsv marked this pull request as ready for review March 8, 2021 16:28

skjnldsv removed their assignment May 12, 2021

mejo- mentioned this pull request Nov 23, 2021

Add emoji autocompletion (#987) nextcloud/text#1961

Merged

mejo- force-pushed the feat/emoji branch 4 times, most recently from c128781 to 3de5082 Compare December 2, 2021 16:05

mejo- added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Dec 2, 2021

mejo- self-assigned this Dec 2, 2021

mejo- requested review from PVince81, nimishavijay and jancborchardt December 2, 2021 16:07

mejo- force-pushed the feat/emoji branch from fa27c4c to 55e8eea Compare December 27, 2021 10:31

mejo- requested a review from marcoambrosini December 27, 2021 10:43

Document emoji autocompletion and make it configurable

a87f492

Signed-off-by: Jonas Meurer <[email protected]>

mejo- force-pushed the feat/emoji branch from 55e8eea to 9802e98 Compare December 27, 2021 12:54

marcoambrosini reviewed Dec 28, 2021

View reviewed changes

marcoambrosini approved these changes Dec 28, 2021

View reviewed changes

mejo- added 4 commits December 28, 2021 17:06

More space (8px) between emoji and emoji name in autocompletion dropdown

d03b421

Signed-off-by: Jonas Meurer <[email protected]>

Raise emoji autocompletion search limit to 10 results

abfa967

Signed-off-by: Jonas Meurer <[email protected]>

Minor UI improvements for emoji autocompletion after PR feedback

26d1a12

Signed-off-by: Jonas Meurer <[email protected]>

Show maximum 5 entries and a half to show scroll in emoji suggestions

20a8aed

Signed-off-by: Jonas Meurer <[email protected]>

mejo- force-pushed the feat/emoji branch from 9802e98 to 20a8aed Compare December 28, 2021 16:06

Set width for emoji autocompletion container to 200px

d214dd6

Signed-off-by: Jonas Meurer <[email protected]>

jancborchardt approved these changes Dec 28, 2021

View reviewed changes

skjnldsv commented Dec 29, 2021

View reviewed changes

mejo- merged commit 62900ec into master Dec 29, 2021

mejo- deleted the feat/emoji branch December 29, 2021 12:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add emoji autocompletion #1474

Add emoji autocompletion #1474

skjnldsv commented Oct 15, 2020 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

skjnldsv commented Mar 8, 2021

simonspa commented Apr 24, 2021

skjnldsv commented Apr 24, 2021

PVince81 commented May 12, 2021 •

edited

Loading

PVince81 commented May 12, 2021 •

edited by mejo-

Loading

skjnldsv commented May 12, 2021

mejo- commented Dec 2, 2021

mejo- commented Dec 27, 2021

marcoambrosini left a comment •

edited

Loading

marcoambrosini left a comment •

edited

Loading

mejo- commented Dec 28, 2021

jancborchardt commented Dec 28, 2021

mejo- commented Dec 28, 2021

mejo- commented Dec 28, 2021

jancborchardt commented Dec 28, 2021

mejo- commented Dec 28, 2021

jancborchardt left a comment

skjnldsv Dec 29, 2021

skjnldsv Dec 29, 2021

mejo- Dec 29, 2021

skjnldsv left a comment

	placeholder="Try mentioning user @Test01 or inserting emoji :smile"
	placeholder="Try mentioning user @Test01 or inserting emoji :smile:"

Add emoji autocompletion #1474

Add emoji autocompletion #1474

Conversation

skjnldsv commented Oct 15, 2020 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

skjnldsv commented Mar 8, 2021

simonspa commented Apr 24, 2021

skjnldsv commented Apr 24, 2021

PVince81 commented May 12, 2021 • edited Loading

PVince81 commented May 12, 2021 • edited by mejo- Loading

skjnldsv commented May 12, 2021

mejo- commented Dec 2, 2021

mejo- commented Dec 27, 2021

marcoambrosini left a comment • edited Loading

Choose a reason for hiding this comment

marcoambrosini left a comment • edited Loading

Choose a reason for hiding this comment

mejo- commented Dec 28, 2021

jancborchardt commented Dec 28, 2021

mejo- commented Dec 28, 2021

mejo- commented Dec 28, 2021

jancborchardt commented Dec 28, 2021

mejo- commented Dec 28, 2021

jancborchardt left a comment

Choose a reason for hiding this comment

skjnldsv Dec 29, 2021

Choose a reason for hiding this comment

skjnldsv Dec 29, 2021

Choose a reason for hiding this comment

mejo- Dec 29, 2021

Choose a reason for hiding this comment

skjnldsv left a comment

Choose a reason for hiding this comment

skjnldsv commented Oct 15, 2020 •

edited

Loading

PVince81 commented May 12, 2021 •

edited

Loading

PVince81 commented May 12, 2021 •

edited by mejo-

Loading

marcoambrosini left a comment •

edited

Loading

marcoambrosini left a comment •

edited

Loading