joeattardi / picmo Goto Github PK
View Code? Open in Web Editor NEWJavaScript emoji picker. Any app, any framework.
Home Page: https://picmojs.com
License: MIT License
JavaScript emoji picker. Any app, any framework.
Home Page: https://picmojs.com
License: MIT License
The last yarn
update I did, I got this warning:
warning @joeattardi/emoji-button > [email protected]: Popper changed home, find its new releases at @popperjs/core
Looks like the popperjs dependency should be updated :)
My project itself uses rem, which causes the picker to be too large. How to solve itοΌ
Hello !
I really love Emoji-Button.
I have a question, can we add it to html page ?
I see in documentation that it's for Vanilla Javascript... but does it work for html page ?
Thanks a lot !
Hi, I noticed the picker scrolls by default down past the first category of Recent Emojis to the second category Smileys & Emotion. I understand one can click the Recent Emoji icon to get there but is there a way to specify the default category it goes to as I would like it to start at the top or Recent Emojis without any user action.
The z-index option needs to be included in the outer most div (class="wrapper"), not the div just inside that (class="emoji-picker"). I'm guessing the outer-most div is being created by the popper, in which case not all of the options (i.e. the z-index) are getting passed.
Passing additional options in the togglePicker seems to have no effect. Looking at the code, didn't seem like the parameter was being used.
Hey there, the two following emoji are running into rendering issues for both Firefox and chrome on OSX (they seem to be fine in Safari). I've checked the unicode listing and relaxed doesn't seem to exist? White frowning face does exist, so i'm not sure what would cause the rendering issues here.
Hello. Great component.
Using this with angular 8 and bootstrap 4 I that the tab icons are not showed correctly, like this:
This is caused by _reboot.scss:
*, ::after, ::before {
box-sizing: border-box;
}
I fixed this issue with this css:
.emoji-picker__tab svg {
box-sizing: content-box;
}
I shared it for maybe include that in the default css in next versions.
Hello,
Currently is not possible translate the Recents category.
Is not part of the type Category as in the past versions.
Hello,
So today I decided to include this script into one of my projects. We want it entirely working internally without needing external resources so I used the download emoji-button-2.12.1.min.js in a script to pull the icons. Yet this gives some weird symbols.. instead of the emojis.
Image here: https://i.imgur.com/jss5IDA.png
Any ideas?
Really nice work, I love it!
After testing it, I noticed that the emojis are always appended after the text. If I want to place emojis in the middle of a text (where I leave the cursor) I have to copy/paste, which is tedious work. I assume this is not intended behaviour of the app.
I would be nice also to have the option to display emoji short names, i.e. : smile : for db storage. Older versions of MySQL configured with utf8 charset (and not utf8mb4) struggle with 4-byte unicode characters.
Poffen
Hi,
first of all, great library π
I've implemented it already in one of my websites :)
Can we reduce reduce bundle size somehow? Right now it is almost ~200kb which is kinda heavy. I realized emoji-button uses
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-regular-svg-icons": "^5.10.2",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
for all used icons (in tabs and search).
We could get rid of those extra packages by extracting respective svg
html for each icon and put it directly in code. I guess it wont change too often ;)
Would be happy to contribute to this cool project!
Have a nice weekend
midzer
edit:
I found out in dist rollup bundler extracts only icons which are necessary. So removing @FortAwesome packages from bundle will have only minor effect. Maybe there are other possibilities to optimize?
I would like to thank you for this, it's really cool ! :)
My suggestions after implementation:
Put the "emoji-button-3.0.3.min.js" file, in the source.zip in the future for releases. It's easier to update for large websites. Also name it always the same "emoji-button.min.js".
Some emojies go outside the grid which creates a scrollbar in X. Could be cool to be able to control column properties tho.
I have an error in the console when I hide the searchBar (showSearch: false).
Solution : Goes away when I add "autoFocusSearch: false". Logic !
So maybe should set "autoFocusSearch" to "false" automatically if "showSearch" is set to "false".
Best regards mate !
Currently it is possible to cycle through all emojis with the Tab key. This can be cumbersome if there are a lot of emojis. It would be nice to support navigating the grid of emojis with the arrow keys.
What an amazing work, thanks!
Ran into this glitch (notice the last line bleeding below the separation line):
Simply using this in my code solved the issue for me:
.emoji-picker__tab-body {
margin-top: 0px !important;
}
Any idea what could be causing this, and if it is the right way to fix the issue?
I have a blank column on the right, with only a handful of icons showing up in some lines:
aaaah I think I understand. They are "combined" emojis that are not properly taken into account by the emoji font I have (you can see the plane under the pilot too, or the mic below):
Hum. Not sure how to handle that?
Is there any way to use emoji from another library like JoyPixels?
I have installed: "@joeattardi/emoji-button": "^3.0.0",
But when I call it with:
public emoji(): void {
const chatBox = <HTMLElement>document.querySelector('.chat-box');
const input = <HTMLTextAreaElement>document.getElementById('chatInput');
if(!this.picker) {
this.picker = new EmojiButton();
this.picker.on('emoji', emoji => {
input.value += emoji;
});
}
this.picker.togglePicker(chatBox, {
position: 'top-start',
zIndex: 20,
theme: 'dark'
});
}
It still displays the light theme.
When using inside a mat-dialog
in Angular, the picker does not show because it is hidden behind the dialog component.
I fixed this a global css style:
.emoji-picker {
z-index: 1001; // Show over mat-dialog
}
It would be nice to be able to customize the z-index through the config object.
Hi, I am having a problem getting this loaded with my site's Content Security Policy below which is sent in header by Apache. I added URL to script in CSP's style-src and script-src sections.
Header set Content-Security-Policy "default-src 'none'; base-uri 'self'; frame-ancestors 'self'; frame-src 'self' https://discordapp.com; media-src 'self' https://ssl.gstatic.com; img-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://www.gstatic.com; connect-src 'self' https://www.google-analytics.com; font-src 'self' https://fonts.googleapis.com http://fonts.gstatic.com https://fonts.gstatic.com https://www.google-analytics.com https://maxcdn.bootstrapcdn.com http://maxcdn.bootstrapcdn.com; form-action 'self' https://api.sandbox.paypal.com https://www.sandbox.paypal.com https://secure.paypal.com https://www.paypal.com; style-src 'self' https://fonts.googleapis.com http://maxcdn.bootstrapcdn.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js; script-src 'self' https://kellypublishing.com https://www.google-analytics.com https://www.googletagmanager.com https://cdn.jsdelivr.net/momentjs/2.13.0/moment.min.js https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js; report-uri https://XXXXXX.com/scripts/cspReport.php;"
I tried loading it like:
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>
get following error
I tried adding a single integrity hash calculated at https://www.srihash.org/.
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" integrity="sha384-2+4ak+EZAvYSg5sqFl6/fu1wxegjxZl52L8+Y4WQSSPlCUYia+2w33MeX9moB58o" crossorigin="anonymous"></script>
get the same error
with the three integrity hashes in above error message
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" integrity="sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU= sha256-j+uGzTtOAr9ui9u6vep2KJDVEj8Ob+QZwv2PG/URCVc= sha256-UTjtaAWWTyzFjRKbltk24jHijlTbP20C1GUYaWPqg7E=" crossorigin="anonymous"></script>
get different error with a different hash
tried adding the fourth hash referenced in above error with
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" integrity="sha256-2zBSl0N0+jv0CCZBDFVUySEiCCsPhfowMQL7NFMdNXA= sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU= sha256-j+uGzTtOAr9ui9u6vep2KJDVEj8Ob+QZwv2PG/URCVc= sha256-UTjtaAWWTyzFjRKbltk24jHijlTbP20C1GUYaWPqg7E=" crossorigin="anonymous"></script>
and get following error
which is the same error as when I just use
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>
Then I tried like below.
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" /></script>
and adding 'unsafe-inline to style-src and script-src section of CSP and do not get any error.
I get all the same results above whether loaded locally or remotely.
Is it possible to get this working without having to add unsafe-inline to CSP? I recall awhile back I was not able to use Google's reCaptcha service due to I believe some inline code in the file they required, might this be the same reason this is not working with a CSP that does not allow unsafe-inline? If so, any workarounds or is such essential to this and likely other similar type emoji pickers?
The clicked tag is not highlighted with a single click. But the content has scrolled to the correct position.
The tag is always correctly highlighted with a double click:
Repro video:
IE11 does not support Object.assign method and I can't use the emoji picker on it even though I'm using picker V2.12.2 which is supposed to support it?
I use Rails + yarn install this project, and use
javascript code
const post_emoji_button = $('#post_emoji_picker');
const post_picker = new EmojiButton({
style: 'twemoji',
position: 'top',
});
post_emoji_button.on('click', () => {
post_picker.togglePicker(post_emoji_button);
});
html code
<div id="post_emoji_picker">
<i class="fa fa-smile">
</i>
</div>
to create a simple EmojiButton, but the position is incorrect, it seems that createPopper
cannot create at right position, the .wrapper
just display on the html page's bottom whatever the position value.
Is there any tool to debug this?
For some reason the emoji quality in the demo
https://joeattardi.github.io/emoji-button is very bad as compared to the README.md picture.
Hey, great library, thanks!
Here are two suggestions:
Hi, do you know why when I select a colored emoji to be inserted into a form field most show the exact colored emoji in the form field while at least one named "smiling face" shows a colorless version? My script inserts the comma before it and it occurs whether that is done or not. I tried in latest Chrome and Firefox. I have <meta charset="UTF-8">
in documents head section. I included a screen capture that loops twice below.
Hi,
thanks a lot for your project, I like it a lot!
I was stumbling upon an issue though: I was trying to prevent the automatic change of focus to the search field by setting the autoFocusSearch option to false - but unfortunately the search field gets focused anyway.
Cannot say for sure, but maybe it's due to what happens here?
https://github.com/joeattardi/emoji-button/blob/master/src/index.ts#L140
This expression anyway resolves to true, or am I missing something?
Thanks!
Hi, I would like to know if there is already a feature to use emojis with :colon: or if there is good advice as how to integrate this.
thanks
There is a delay between "closing" the emoji picker and its div
being removed from the DOM (for the nice fade out animation effect).
If showPicker
is called while this animation takes place, the picker does not show up. I guess it's because the div
is removed from the DOM a few milliseconds after.
As far as I understand, a check on whether the visible
class is present on the DOM in showPicker
could fix the issue.
Or maybe adapting the code I use to call the picker?
this.picker.pickerVisible
? this.picker.hidePicker()
: this.picker.showPicker(this.emojiButton.nativeElement);
I can get to work on writing up a new one if it suits you at this time.
It looks like #12 is back in my project:
Removing the margin-top: 0.5em
fixes the issue for me:
What do you think is the best way to fix it?
Great tool!!
Just wanted to point out that the demo page is trying to load:
http://joeattardi.github.io:35729/livereload.js?snipver=1
Which is 'insecure' and so the page gives a mixed content warning in the browser.
This compile error started popping up in my Angular project after updating to latest version:
ERROR in src/app/shared/custom-forms/components/inputs-complex/input-emoji/input-emoji.component.ts:3:8 - error TS1259: Module '"/home/mic/dev/qontrol/product/frontend/node_modules/@joeattardi/emoji-button/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
3 import EmojiButton from '@joeattardi/emoji-button';
~~~~~~~~~~~
node_modules/@joeattardi/emoji-button/index.d.ts:3:1
3 export = EmojiButton;
~~~~~~~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
Playing around with allowSyntheticDefaultImports
in my tsconfig.json
didn't fix the error.
Typescript doc mentions it's just for type-checking.
Any idea on how to fix that?
Somehow I missed this one.
Is there an option to show or hide specific categories tabs?
I tried to find an option to do that in the documentation but I couldn't find any.
Thank you for this amazing bundle.
Hi, I forked your library, updated the emoji-datasource library to the most recent version (5.0.1) and run the processEmojiData.js.
Apart from some problems with the categories array, that I manually fixed, now I have many empty emojis and also emojis composed by multiple ones. Any suggestions on how to fix it? Is there anything else I should update to make it work?
It would be amazing if you could update the library, adding all the new missing emojis.
Thanks!
I'd like to potentially add support for custom emojis section, like missive: https://github.com/missive/emoji-mart#custom-emojis
The emoji buttons are focusable, but when they receive focus they don't update the preview.
Hello,
I was using your component from the last couple of days and it's perfect π
One small thing I saw is that when I created a picker with some categories, let's say this :
const picker = new EmojiButton({
categories: ['smileys', 'animals', 'objects', 'people']
});
I still can see other categories when searching (for example flags) :
This could be confusing from an user end.
I'm using the twemoji, along with a parser in a textarea that converts all the :smile:
etc to twemojis, and want to use this. I've found that the twemoji outputs html, but it would be really helpful if it included the name as a data-
attribute, or anything that I could extract from the html.
Hi π
on mobile I experience that keyboard opens up right after click on emoji-button. This is because its search bar gets autofocus. Especially on small screens this situation covers much of the screen. Maybe users want to click/browse through emojis instead of searching for them on first hand.
How about making it optional that searchbar gets autofocus on open.
I would be happy to contribute PR if you're interested.
Have a nice week
midzer
Emoji is adding in the end of the string.
Current functionality -
An keeps a doctor away π
Expected functionality -
An π keeps a doctor away
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.