[RELEASED / FREE] Emoji One Area Picker and Converter

[Jici]

Hi Bubblers!
This was requested often but here’s finally a plugin that let user add emoji to text field (native Bubble single line or multiline text field).

This also support : dropdown exactly like here in forum so :smile will allow you to select it from a dropdown

A lot of options is available like Tones, Picker Position, Translation for text…

Also, I’ve included a second element that convert from and to: unicode, shortcode or image.

Demo: https://sandboxjc.bubbleapps.io/emoji
Editor: https://bubble.io/page?type=page&name=emoji&id=sandboxjc&test_plugin=1567209674254x858786633827483600_current&tab=tabs-1

[luke2]

Hey @Jici

Nice work here, appreciate the free release. Just a few minor points and suggestions that I thought I’d share:

• When clicking the emoji icon to initiate the list, it doesn’t auto focus to search the list emojis. Would be great to see it focus to the search input automatically so we could directly type for instance ‘smile’ and the emojis get filtered.
• The search seems to be case sensitive. Its fine on desktop, but by default my mobile will capitalise, so in the searchbox it will be ‘Cat’ and therefore no results will be found.
• When searching it would be great to filter the list e.g. ‘cry’ and then to hit the enter key which would use the first entry on the filtered list, rather than clicking the desired emoji

Cheers.

[Jici]

UPDATE
Added 2 actions: Set focus on Textarea, Clear input.
Now autofocus on search bar when picker is opened

@luke2 For other requests. This is more complicated and maybe I will want for the new version of the library to set that. But possible that the Case sensitive will be fixed before that.

[reger-alexander]

Thank you, great work

[recrutbox]

Hi @Jici

First, thank you for releasing this plugin so needed!

I just tested it and I noticed that when the option “hide on blur” is on “yes”, it doesn’t work anymore: the click on the right smiley icon doesn’t open the emoji list.

I also wanted to ask you how can we control the size of the converted text?

[Jici]

Hi @recrutbox Thanks to reach. I will have a look at the blur issue.
Can you explain more what you want to do with the size of the converted text? Technically, it should be set using the element you are using to display the text.

[recrutbox]

As for the size, I want the font-size (text + emojis) to be smaller but I can’t figure out how to control it. I did like in your demo page, using a html element to display the text because with a native bubble text element, it didn’t work.

[Jici]

@recrutbox
I fix is done for the blur issue.
For the text display, look here:

Bubble Editor - Sandboxjc

You can see on left side (text element) that I use Bubble setting. On Right side, (html element), you need to use html tags. In this case I use font size.

[eren]

That’s very handful @Jici

Thanks for the plugin!

[recrutbox]

@Jici Thank you so much for the fix and help, it’s perfect!

[anwarsby]

Hi @Jici

Thank for the cool plugin, I’ve installed and try to use it for a multi line input but found it seems the plugin overrides input’s conditional and properties. Is that the way it works?

Coz I need the multi line input behaves as the conditional and properties I set. Is it possible?

Here is the example:

Bubble Editor - Testemoji

Thanks in advance
Anwar

[Jici]

Yes. This will hide the initial input field (this is how the script work, not the plugin itself). If you have condition (like hiding the field), you should put condition on the plugin too,

I can consider a new version that will not use the bubble plugin and create is own input field.

[anwarsby]

Thks for quick reply! As a non coder I’m not cofident fully understand what you explain😁 but will try again to play with conditionals on the plugin.

Honestly this is very cool. And if you create that new version i believe would help a lot of bubblers. Personally i think you are too kind to provide as free😀 i still use this plugin if i have to pay for it though👍

Anwar

[recrutbox]

Hi @Jici

It’s me again, I wanted to ask you if the plugin currently takes into account repeating groups?

I mean, I placed a multiline input inside a repeating group and only the first cell seems to react to the plugin, certainly due to the fact that the ID has to be unique, I guess.
In the element EmojiOA of your plugin, the field ID attribute can’t be dynamic, so we can’t give a unique ID.
Also, when placed inside a repeating group, the focus group that contains the emoji list, appears kind of transparent with not clickable emojis, as if it was sent to background.

Here is a link to the editor mode:

Bubble Editor - Emoji-input

Lastly, about the previous post, I didn’t fully understand this part:

@Jici

If you have condition (like hiding the field), you should put condition on the plugin too,

Do you mean that we have to add code to the plugin?
(For example, in my case, I need the multiline input to be set to “stretch to fit content”.)

[Jici]

For RG, try to use current cell index in Attribute ID (both in plugin and in input). I pushed a fix for that.

I understand what you mean. In this case, this is not a condition like showing or hiding the field.

This will be part of a new version.

[recrutbox]

Thanks for your reply, I really appreciate your help!

With the fix you made for dynamic attribute, each cell now reacts to the plugin but there is still an issue on the focus group display.
I don’t know where it comes from but I notice that it depends on the size of the cell.

For example, in my demo page, the size of the cell depends on the number of comments left by users.
So, the more comments the cell contains, the more likely the focus group will fully be displayed. On the contrary, if the cell contains no comments or not much, the focus group of emojis will be cut or transparent.

Bubble Editor - Emoji-input

[Jici]

Just let you know that I’m working on a new version that will not be linked to native Bubble input but will use it own. This should help fixing issue with RG and some other element. Thanks

[ts11]

Hi there, @Jici . First off, thank you so much for contributing this stellar little utility to the Bubble community. I’m very grateful for it. That said, I was hoping you might help me troubleshoot something while we await the rebuilt plugin you alluded to in your last post.

I am using an EmojiOA-linked multiline input in a reusable element nested within a repeating group. I managed to get the picker to display properly with the dynamic ID hack you shared with @recrutbox. That said, for some reason, the actual input is disabled (see screenshot), so that I can’t input any text or even have the input highlight as it should on focus. I’ve tried to isolate the problem, but am at a bit of a loss. Do you have any idea why this might be happening or how I might fix it?

[Jici]

Hi @ts11 Can you share a link? Also, can you share the input field setting (multiline one). Thanks!

[ts11]

Hey, @Jici. Thank you so much for the quick response. Please forgive the ignorant question (still a newbie!), but what is best practice for sharing an editor link on the forum? I’ve not done that before. Would I need to add you as a collab in app settings or is there a more straight-forward approach. Also, could you clarify what you mean by “input field setting”? I eliminated the reusable element and rebuilt on my main page to see if that fixed the issue, but still no cigar. Look forward to your feedback!