Plugin: Emoji Picker

joplin-plugin-emoji

This plugin allows you to input emoji simply by typing :[emoji name] or ::[emoji name] .

Usage

  • Typing : and at least a character to show the Emoji Picker
    • You can also switch the trigger to :: in settings
  • Using name to search for emojis you want.
  • Click outside the picker or input special chars like {}[].,/\ will close the picker.

Demo

trigger
trigger1

The repository is here: GitHub - Retr0ve/joplin-plugin-emoji: Better way to input emoji in Joplin.

If there are any bugs or suggestions, please leave a comment or open an issue to let me know, thanks.

8 Likes

In case someone is a windows user and doesn't know this feature - you should be able to summon the built-in emoji pane anytime, anywhere by pressing win + . or win + ;.

7 Likes

Thanks for making this!

Wouldn't it be better if a double colon triggered the popup?

2 Likes

I was also going to recommend using a double colon to activate it. Single colon is too commonly used in regular sentences while double colon isn't.

Nice plugin otherwise!

1 Like

I just checked what discourse, slack, notion do for this.
Discourse and Notion: Popup after typing one character (e.g. :s)
Slack: Popup after two characters (e.g. :sm)

By the way @Retr0ve, I noticed that you're applying for GSoC 2022. With that in mind, could you provide some details about the implementation of you plugin? For example, what libraries did you rely on?

This would work as well. But what about if I am writing a time? e.g. 12:00 the popup would show up when unwanted. Perhaps a way to avoid this issue would be to not show the pop up if a character is in front of the colon.

Thanks for your checking, I added a setting to toggle between the modes you have mentioned.

My original thought is to use the show-hint.js provided by CodeMirror. However, the interface is rather ugly and that's why I kind of rewrite this feature to pop a customized tooltip. The main tooltip is actually based on raw HTML (which is borrowed from a codepen repository), I think I'll rewrote this part in the future to generate HTML automatically to support all the emojis.

This is my first time contributing to a open source community, and it feels really great to have all these feedbacks. Thanks again!

4 Likes

I just double-checked what Discourse and Github does and there is a popup as soon as : is typed as long as there isn't a character directly in front of it. e.g. "12:00" or "The following:" wouldn't trigger the pop up.

@Retr0ve I think this behavior would be better to implement than having to also type another character after the :. I actually can't think of any cases when normally writing that a : would be used without having a character directly in front of it. So there shouldn't really be any cases where the popup would show up when unwanted.

Another suggestion I have is to already have the first emoji on the list selected when the popup opens up. That way I could press : and then Enter to quickly insert the most recently/most commonly used emoji.

When writing in English, probably not, but it's actually quite common to put a space before : in some other languages (e.g. Korean).

1 Like

Interesting. Good to know! Well this plugin has the config option to use either single colon or double colon to activate the popup so the latter can be used by non-English writing users where the single colon would cause too many unwanted popup activations.

For me as an Chinese, we don't use space to sperate the words, if I

we'll never be able to trigger it. I think with all that being said, :: is the better option here? And I totally agree with the preselected part, I will implement it on the next update.
Thank you for your suggestions!

3 Likes

Well that complicates things haha Sounds like :: is the universally compatible option.

1 Like

In french typography, there is always a space in front of : (and !?)
(To be precise, it should be a non breaking space, but... well...)
:slight_smile:

1 Like

I think this may also be common in non-NA English.

So to summarize there are two ways to treat the activation of the popup when using a single colon:

  1. Activate after : and one character (current implementation in plugin)

    • Language that does not put spaces before colons (e.g. American English)
      • Will sometimes have unwanted popups e.g. when typing a time 12:00
    • Language that does not use spaces between colons (e.g. Chinese)
      • Will always activate and thus have many unwanted popups
      • Having to type an extra character after : makes no difference in unwanted popups?
    • Language that puts spaces before and after colons (e.g. French)
      • Won't activate when unwanted
  2. Activate after : and if no character before it (same implementation as Discource, Github, etc at least when set to American English)

    • Language that does not put spaces before colons (e.g. American English)
      • Won't activate when unwanted
    • Language that does not use spaces between colons (e.g. Chinese)
      • Will never activate and won't be functional
    • Language that puts spaces before and after colons (e.g. French)
      • Will always activate and thus have many unwanted popups

#1 seems to have the least issues but as someone who uses English primarily, I'm biased towards #2 since it works best for me and follows what I am already used to in other apps/websites. Perhaps we could just make this a configurable option if it's not too much hassle?

3 Likes

Nice idea, but will be uninstalling this plugin. Already use Typora as external editor for that and has this function build-on much more efficient.

the Joplin plugin will not find me certain Emoji's which I use, for example where i need to mark "global"

plugin:
image

typora:
image

Iā€˜m sorry for the bad exprience. As I mentioned above, this plugin is still in its beta as I'm gonna rewrite the HTML generating part to support all emojis. Thanks for feedback anyway. :smiley:

1 Like

Thank you, I will try again some time in future

Would the most sensible option not be to implement all of these and let the user decide according to their needs?

I don't know if you can detect the system language in Joplin but that would be cool too, maybe a fair bit of hassle too...

UPDATE 1.0.2

  1. Now support emoji version 12.
  2. Added a grid system, now it's more organized.
  3. Now matches themes in settings.
    image

Thank you for all your support! Please let me know if there is a bug or you have any other suggestiones.

1 Like