Add copy on Ctrl+C and context menus for each emoji

[garretwilson]

Edit (by @rugk): The scope of this issue has been redefined in #100 (comment)

This is a really good emoji picker! Congratulations and thank you!!

But it needs a few usability tweaks to make it really awesome.

Let's say that I hit Ctrl+Shift+. to bring up the picker and then type "joy". I am presented a set of options. It is at this point where the picker UI needs a little bit of usability improvement.

• Arrow Navigation: I need to be able to immediately hit the down arrow key to move the cursor to the options. I shouldn't have to press Tab. And after one of the options is selected, I should be able to use the arrow keys to navigation the options.
• Copy Using Ctrl+C: Once I the correct emoji is selected, I should be able to use Ctrl+C to copy the selected emoji to the clipboard. And why not? Ctrl+C is the standard key combination for copying. Everywhere. For everything.
• Insert Not Copy on Enter: Once the correct emoji is selected, I should be able to hit Enter to insert the selected emoji at the current point. But this should not copy it to the clipboard. The current behavior both copies and inserts the emoji. But I would seldom need to do both. If I insert it, why do I need it in my clipboard? And if I asked to copy it to my clipboard, then that probably means I didn't want to insert it (or I would have inserted it). The problem here is that I may be working on a large development project or typing a long description, and I have something important in my clipboard. I may just want to insert an emoji. But why should I lose everything in my clipboard just to do that?

So thanks again for the great start on this emoji picker. I hope you can make it truly awesome; it's so close to being awesome already!

[rugk]

First of all, thanks for the gratitude. If you want to find more information on how to support us, have a look at https://github.com/rugk/awesome-emoji-picker/blob/master/CONTRIBUTING.md#support-us. 😃

That said, next time, please open a new issue for each idea/issue/bug you have, so they can be tracked separately.
Also, please mind to search for existing issues before opening a new issue for a feature or bug.

Arrow Navigation

This is already tracked in #41.
And there is happy news for you, actually, because there is a good chance this will be implemented in the next version.

Copy Using Ctrl+C

I'd also say this belongs to #41. However, I don't think this is very useful, because while Ctrl+C is well known for copying, it only applies when text is selected. You don't select an emoji with this add-on you pick it. 😜 No, srsly, you see no blue selection bar and thus I guess people won't get this would work. So UX-wise, I don't think this is useful.
What makes much more sense is just using Enter/Return or space for it. This is included in #41 and actually also works today somewhat: Cycle through your emojis by using tab to change the focus and then use Enter or space to select one.

Insert Not Copy on Enter:

Again the same topic, although your idea is interesting. That said, I'll still think it's quite intuitive to differentiate between the keys here, because how should a user know, which key does what (and what exactly one does not?). Also what should clicking then do? (So I don't agree on the UX aspects here.)

The current behavior both copies and inserts the emoji. But I would seldom need to do both.

You can change this behaviour in the options.

If I insert it, why do I need it in my clipboard?

This is more or less a workaround that has been introduced, because some sites don't properly work when trying to insert the emoji directly. See this label for known site issues.

The problem here is that I may be working on a large development project or typing a long description, and I have something important in my clipboard. I may just want to insert an emoji. But why should I lose everything in my clipboard just to do that?

Thanks for the use case. Indeed, I acknowledge this is a problem. At least you can partially (or totally) disable that behaviour in the settings (e.g. because of that reason).

Thanks for the feedback anyway. Do you think #41 addresses all your concerns, so I can close this one in favor of the other one?

[garretwilson]

The problem here is that I may be working on a large development project or typing a long description, and I have something important in my clipboard. I may just want to insert an emoji. But why should I lose everything in my clipboard just to do that?

Thanks for the use case. Indeed, I acknowledge this is a problem. At least you can partially (or totally) disable that behaviour in the settings (e.g. because of that reason).

But I don't want to disable copying. It's just a separate use case altogether.

Have you used the WhatsApp desktop app? Or the Telegram desktop app? In either of these I can hit the : key and type the name of an emoji. (So in fact, Ctrl+Shift+: might be a better hotkey for your add-on, but that's a trivial thing.) Then in both of these applications, I can hit Enter to select the emoji to have it inserted.

Can you imagine if this erased my clipboard!??? 😮

In fact do you know how I just entered that emoji 😮 above, here on GitHub? I again hit : and typed open_mouth and then hit Enter. It inserted the emoji. Can you imagine if this erased my clipboard, too? 😱

So we see a pattern:

• Basically many popular emoji pickers (other than yours) use : to launch the picker, so I suggest you switch to Ctrl+Shift+:.
• Every emoji picker I know (e.g. WhatsApp, Telegram, GitHub) insert the emoji without erasing what is in the clipboard.

So there shouldn't be a need to do a "workaround" by going into the settings. Just don't insert anything into the clipboard when I hit Enter.

But that doesn't mean I still don't need to insert the emoji into the clipboard sometimes. Your add-on is so good that I may want to switch to Firefox just to use the emoji picker, and then switch back to insert it into some other app. But that shouldn't be done by the standard key. There needs to be some other keypress for copying the emoji. What better than Ctrl+C?

You don't select an emoji with this add-on you pick it.

That is an odd thing to say. If you don't select an emoji, how can you insert it? Of course you select it. You just use the focus indicator rather than the selection indicator.

No, srsly, you see no blue selection bar …

That just means you need to improve the UI of your selection. Because you do have a selection, otherwise we couldn't know which emoji we were inserting!

So you can either prevent us from using Ctrl+C because you can't make the selector blue, or you can allow us to use Ctrl+C and say that one day you'll improve the selector color. I fail to see why the former is the better choice …

[rugk]

Reg shortkey insertion: Yes, I know this, actually you can use it on GitHub too, as you've noticed.
Anyway, it's a totally different UX IMHO, as you do not select something from a list, but enter it by a text "autocompletion".
FYI this add-on may also enable that feature on all websites (see #66) in the future.

That said, I totally see that these are different use cases that I just want to summary right now (from what I understood):

• insert into web page: usage inside of Firefox, on websites. Most likely you open the selector via the hot key and select your emoji.
• copy to clipboard: either as a workaround when the above does not work for the website OR if you want to insert an emoji somewhere else on your desktop

Going back to the : feature, I would not call this an "emoji picker". Actually this feature is well known by the name “emoji autocompletion”.
The difference is, when you write it the way with : you actually want to "write" an emoji and to do that, you just write it's name and select the one you want.
And emoji picker like this add-on is rather a thing you "click" on and a popup opens, where you can search for your emoji and insert it, e.g. like this in Mastodon (and in many messenger apps, Twitter etc.):

Alone visually it looks more similar. However, in an emoji picker you can correct your result, search again and see all results etc. It's a slightly different UX experience.

That said, there is one thing I agree on: They both usually don't copy an emoji to the clipboard.
Given that, we'd have to look on why we actually need to copy it. Given our two use cases above, we have:

• it's a workaround for the current website – this is bad and may be fixed in the future
• it's because you need to insert it into another application – this is a thing we likely can never change, given add-ons can only modify the browser and not other applications

Now, there are websites for the last thing too, but an add-on is obviously more convenient.

That just means you need to improve the UI of your selection. Because you do have a selection, otherwise we couldn't know which emoji we were inserting!

This is correct and already done as part of #41. But even if we'd give them a big blue background when we cycle through them, that does not change the fact that users don't expect that you can use a Ctrl+C short hot key to copy the emoji.
When do users expect that? If we are in a file manager and have a file selected or if we have a text cursor and e.g. also even an emoji selected (in an input box or textarea etc.). I can't recall more situations. (Or if we have a button labelled "copy" of course.)
The problem here is that we are neither in a file manager (and I don't want to make it look as if we are 🙈) and this is also no input box.
See e.g. how emojipedia also shows their emoji to copy in an input box and with a clearly labelled button next to it.

---

All I want to say is: Users won't discover this feature on their own.
And I see no way to make it more discoverable in the UI. (It makes total sense semantically, I know, but you likely won't find it unless someone tells you.)

That does not mean it could not be a good addition as a "power feature", because adding it breaks no user workflow, you cannot copy something else there at that point e.g.

In the next comment I'll describe some ideas on how that may look.

---

Off-topic, but also note that if you just want to copy an emoji to your clipboard you can also use the address bar.

[rugk]

As such, I'd be fine with this idea if:

• we don't remove/change the existing behaviour that happens on click/on enter or so.
  Users would have to adapt their workflow if we did, likely would not discover the new feature, so this would not be a good thing. This is configurable in the settings and if you want you can disable copying there.
• we then add this feature to still allow copying, even if the previously mentioned setting is disabled.

As for the new feature:

• Ctrl+C should copy the currently focused emoji (likely only makes sense after Keyboard friendliness: selecting emojis #41 is implemented)
• also, we can explore to provide the same functionality via a context menu, i.e. if you right-click on an emoji you get a "Copy emoji to clipboard" entry and – well… – you can just do that. 🙂
  And if we already do that, we could add more entries for "insert to web page" and possibly "insert to page and copy to clipboard" to have a fixed set of features that one can use regardless of what happens on click.
• also, both of that must ignore all existing settings in the add-on regarding the behaviour, because IMHO the popup should never close (because if you switch to another application that will happen automatically)¹ nor should that feature be possible to disable (it's obvious you don't want it to go away)
• also I'd want to add a a tip to and possible a FAQ entry to make it possible to discover that feature (+ usual additions in Readme/AMO etc. of course)

Whether both are technically possible in a good way I'm not yet totally sure, especially given we may need the new contextmenu permission.

¹ only for the "workaround use case" this may be impractical, so maybe an additional setting could help here, but actually I'd say that is not worth it.

And… I'm of course happy to accept PR's for this feature.

[tdulcet]

I again hit : and typed open_mouth and then hit Enter. It inserted the emoji.

If #93 is merged and you type just :open_m, it will autocomplete to :open_mouth: and then as soon as you type another character, such as a space (␣) or enter (↵), it will autocorrect to 😮 on all websites. There is a demo of this feature in #66 that you can try out now.

[garretwilson]

we don't remove/change the existing behaviour that happens on click/on enter or so

When the current behavior is unexpected and destructive, sometimes it needs to be changed even if current users go through a little transition in order to prevent data loss and to gain even more users. Here are the considerations:

This behavior is not consistent with what I would expect after using emoji selectors the most popular applications including Slack, WhatsApp, Telegram, etc. (You can try to make distinctions between emoji "selectors" and "pickers, but I don't buy it. What's important is not how you view the application, but how users are using it. Why not take a survey of they users?)

The behavior is destructive: information is lost. Sure maybe your initial users expect that their clipboards will be erased. But do they like that? And what about new users coming in? Will they even bother finding the GitHub page and opening a ticket? Or will they just switch to a different emoji selector, oops, I mean "picker".

Why don't you ask your users? I'll bet they agree with me and want consistent behavior with all the other built-in emoji selectors in their applications. Or just make it configurable and be done with it.

[rugk]

If users install the add-on it's clearly stated right in the first text they read (AMO summary e.g.) that this modifies the clipboard.
So this should not surprise anyone, and you are personally the first that did not like this behaviour and wanted it be be changed as a default. So I would get much more complaints if this would be annoying to a majority of the users…
Also the blue confirmation message clearly tells what is happening again…
As said, I won't change these defaults, as users – like you likely did – can just modify the settings if they want it changed.

Or just make it configurable and be done with it.

It is.

That said: As stated before, I changed the scope of this issue and it is clear that I'd think adding Ctrl+C support is a nice feature to have (nice to have), so I do appreciate PRs. If you really want it, you could take a look at the contributing guide and add it.

[rugk]

Blocked by missive/emoji-mart#444 (unless someone wants to create a custom implementation, as said, PRs are fine)

[garretwilson]

Hi, I hope you're doing well. I haven't had a chance to use your great extension again until recently, on a laptop upgraded to Ubuntu 18.04. I don't know what the final status is with the ability to select with arrows and/or <tab>, but it looks like it's still not working as one would expect:

1. I hit Ctrl+Shift+. to bring up the picker.
2. I type thu. A thunderstorm cloud, a thumbs-down, and a thumbs-up appear.
3. I repeatedly hit <tab>. A square selector appears on the thunderstorm cloud. I keep hitting <tab> until the square selector is on the thumbs-up emoji.
4. I hit <enter> and the thunderstorm cloud, and not the thumbs-up emoji selection, is entered into the field at the cursor.

I don't remember all the intricacies of our discussion regarding selection, so apologies if we already covered this. I just wanted to document the problem in case you thought you had fixed it since then.

[garretwilson]

I filed this three years ago. I'm stopping by to check the status:

• Arrow Navigation: Supposedly tracked by Keyboard friendliness: selecting emojis #41 or maybe Opening via hot key prevents it from focusing input #28, both of which are still open.
• Copy Using Ctrl+C: I guess tracked by Keyboard friendliness: selecting emojis #41; I guess not finished either.
• Insert Not Copy on Enter: Ditto?

[rugk]

As said, still all blocked by missive/emoji-mart#444 and also kinda by #116, which in itself also has higher priority, but was kinda stuck on implementation (see PR).