# Plugin: Emoji Picker

**URL:** <https://discourse.joplinapp.org/t/plugin-emoji-picker/24228>\
**Category:** Plugins\
**Created:** [8 March 2022 10:39 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228 "2022-03-08T10:39:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Retr0ve](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/retr0ve/32/12960_2.png) [@Retr0ve](https://discourse.joplinapp.org/u/Retr0ve)\
**Post date:** [8 March 2022 10:39 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/1 "2022-03-08T10:39:21Z")

</div>

# 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](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b8a24e4cb7b3c03e31dae378ac3e714c69c91f65.gif)  
 ![trigger1](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/5/5854934231d5322547113b34d96487fa733c8145.gif)

The repository is here: [GitHub - Retr0ve/joplin-plugin-emoji: Better way to input emoji in Joplin.](https://github.com/Retr0ve/joplin-plugin-emoji)

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

---

<div class="post-metadata">

**Author:** ![zblesk](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/zblesk/32/11_2.png) [@zblesk](https://discourse.joplinapp.org/u/zblesk)\
**Post date:** [8 March 2022 11:22 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/2 "2022-03-08T11:22:25Z")

</div>

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 + ;.

---

<div class="post-metadata">

**Author:** ![whitewall](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/whitewall/32/6018_2.png) [@whitewall](https://discourse.joplinapp.org/u/whitewall)\
**Post date:** [8 March 2022 16:35 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/3 "2022-03-08T16:35:24Z")

</div>

Thanks for making this!

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

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [8 March 2022 16:46 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/4 "2022-03-08T16:46:38Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [8 March 2022 19:33 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/5 "2022-03-08T19:33:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [8 March 2022 23:33 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/6 "2022-03-08T23:33:47Z")

</div>

> [@CalebJohn](#):
>
> 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)

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.

---

<div class="post-metadata">

**Author:** ![Retr0ve](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/retr0ve/32/12960_2.png) [@Retr0ve](https://discourse.joplinapp.org/u/Retr0ve)\
**Post date:** [9 March 2022 10:06 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/7 "2022-03-09T10:06:16Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [9 March 2022 20:47 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/8 "2022-03-09T20:47:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tomasz86](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@tomasz86](https://discourse.joplinapp.org/u/tomasz86)\
**Post date:** [9 March 2022 21:30 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/9 "2022-03-09T21:30:06Z")

</div>

> [@shbach](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [10 March 2022 00:53 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/10 "2022-03-10T00:53:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Retr0ve](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/retr0ve/32/12960_2.png) [@Retr0ve](https://discourse.joplinapp.org/u/Retr0ve)\
**Post date:** [10 March 2022 02:02 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/11 "2022-03-10T02:02:37Z")

</div>

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

> [@shbach](#):
>
> popup as soon as `:` is typed **as long as there isn't a character directly in front of it.**

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!

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [10 March 2022 05:41 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/12 "2022-03-10T05:41:05Z")

</div>

> [@Retr0ve](#):
>
> we don't use space to sperate the words

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

---

<div class="post-metadata">

**Author:** ![blank](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@blank](https://discourse.joplinapp.org/u/blank)\
**Post date:** [10 March 2022 06:51 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/13 "2022-03-10T06:51:00Z")

</div>

> [@shbach](#):
>
> 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

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

---

<div class="post-metadata">

**Author:** ![whitewall](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/whitewall/32/6018_2.png) [@whitewall](https://discourse.joplinapp.org/u/whitewall)\
**Post date:** [10 March 2022 13:52 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/14 "2022-03-10T13:52:17Z")

</div>

> [@blank](#):
>
> is always a space in front of `:` (and ` !?` )

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

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [11 March 2022 01:00 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/15 "2022-03-11T01:00:01Z")

</div>

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)

2. Activate after `:` and if no character before it (same implementation as Discource, Github, etc at least when set to American English)

#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?

---

<div class="post-metadata">

**Author:** ![Rolograaf](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/rolograaf/32/1675_2.png) [@Rolograaf](https://discourse.joplinapp.org/u/Rolograaf)\
**Post date:** [13 March 2022 17:35 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/16 "2022-03-13T17:35:14Z")

</div>

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](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/5/57b7427defb3824fe45ef51e2522a4d259a30e2b.png)

typora:  
 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b2fe2547a06a805577053a87481499c3a4904170.png)

---

<div class="post-metadata">

**Author:** ![Retr0ve](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/retr0ve/32/12960_2.png) [@Retr0ve](https://discourse.joplinapp.org/u/Retr0ve)\
**Post date:** [14 March 2022 01:41 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/17 "2022-03-14T01:41:21Z")

</div>

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. 😃

---

<div class="post-metadata">

**Author:** ![Rolograaf](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/rolograaf/32/1675_2.png) [@Rolograaf](https://discourse.joplinapp.org/u/Rolograaf)\
**Post date:** [18 March 2022 17:32 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/18 "2022-03-18T17:32:15Z")

</div>

Thank you, I will try again some time in future

---

<div class="post-metadata">

**Author:** ![Imperial\_Squid](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/imperial_squid/32/15471_2.png) [@Imperial\_Squid](https://discourse.joplinapp.org/u/Imperial_Squid)\
**Post date:** [19 March 2022 03:37 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/19 "2022-03-19T03:37:00Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![Retr0ve](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/retr0ve/32/12960_2.png) [@Retr0ve](https://discourse.joplinapp.org/u/Retr0ve)\
**Post date:** [28 March 2022 06:16 UTC](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228/20 "2022-03-28T06:16:56Z")

</div>

## 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](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/0/087961bb4a93adb37de7d3d3a5b1b0805609830f.png)

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

[Next page](https://discourse.joplinapp.org/t/plugin-emoji-picker/24228.md?page=2)