iamcal / js-emoji Goto Github PK

To get bower working you should tag the releases using semver notation. This means v3.0.0 instead of v3.0.

Is there a reason why all the method names are snake case instead of the conventional js camelCase?

As a result of this Firefox issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=548397

this line in emoji.js:
var st = window.getComputedStyle(document.body);

causes an exception on the next line if the code is executed within a hidden iframe.

My site only works with css support anyways, so I can patch it for myself easily enough, but I'm not sure what a good fix is in general.

I looked through the sub-module setup a bit, but for some reason js-emoji pulls an older version of your emoji-data repo. It pulls the version that has an SSH submodule reference which causes builds to fail for this module. If you can update it to pull master (or at least since that issue has been fixed) that would be great.

The SHA of emoji-data that is referenced by this project is a commit that doesn't take into account iamcal/emoji-data#51, so Travis builds are still failing. Would it be possible to cut a release/update that SHA? I think that's the last thing we need to get this all worked out :)

Update: Confirmed – that fixes it! Passing build here which relies on a fork.

I can't find which specific version of Chrome brought in Emoji support but I do know it's working in v41. The update was made earlier this year: http://thenextweb.com/google/2015/01/11/emoji-support-finally-coming-google-chrome-os-x/

It also appears to be working in Firefox.

Great project!

While trying out this library in a desktop browser, I was surprised by a 12MB download for the apple_64 image sheet.

Is there any straightforward way to support use cases that could do with smaller icons than the current 64x64 representations? In my own project, 16x16 would be more than enough.

Ideally, users could be able to specify a subset of emoji to support, but this would imply using single images instead of sheets -- and I suppose that would make this into a full-fledged feature request. It's just that the huge size of the sheet can make this library a tough choice to consider given the significant download size.

(I fully understand that this shortcoming is probably due to a design choice to be able to support the full set of emoji.)

Can you update the current version to bower?

Hey,

I've been having issues converting several emojis on IOS 10 from the emoji keyboard. Some of these include:

• SMILING FACE WITH HALO 😇
• SMILING FACE WITH SUNGLASSES 😎
• CONFUSED FACE 😕

and many others.

I've confirmed the following aspects of this issue:

1. Emojis are able to be input and stored in unicode format.
2. The result of replace_unified works as expected on a desktop web browser running Mac OSX or Windows.
3. The result of replace_unified is completely blank on both Chrome and Safari on IOS 10 for certain emojis.

Is this a known issue, or is there a way around this? I can create a JSFiddle if that would be helpful.

I used your excellent library to build an emoji picker of my own here https://github.com/RobertMenke/rm-emoji-picker.

I've run into an issue when testing in IE11. On certain web pages I'll get the expected output of a span with sprite sheets using the background-position css properties, but on other pages the library will attempt to render emojis as images. My code basically looks like this:

const converter = new EmojiConvertor();
converter.init_env();

converter.img_sets.apple.sheet    = sheets.apple;
converter.img_sets.google.sheet   = sheets.google;
converter.img_sets.twitter.sheet  = sheets.twitter;
converter.img_sets.emojione.sheet = sheets.emojione;

converter.use_sheet               = true;

some_input.innerHTML = converter.replace_unified(some_string);

Is there a way I can force replace_unified and replace_colons to render as spans instead of images?
Could you shed some light on what causes js-emoji to use images rather than styled spans in this circumstance?

Thanks!!

replace_unified only works when the emoji is encoded by unified,does this project has an method to handle SoftBank emoji??

Maybe I've missed it, but I can't see a license file for the js and css. Was hoping you could add one in or clarify what the license is.

I used this lib in v2 and it was working great, I tried v3 and even on the demo the substitution seems wrong...

Hi there,
I need a feature to keep the original unicode emoji after a replace.
I'm using replace_unified to replace my unicode emojis. But after clicking on one smiley I need to add this smiley to a chat-text-input.

For this I changed the function emoji.prototype.replacement:

if (self.supports_css) { if (self.use_sheet && px != null && py != null){ var mul = 100 / (self.sheet_size - 1); var style = 'background: url('+self.img_sets[img_set].sheet+');background-position:'+(mul*px)+'% '+(mul*py)+'%;background-size:'+self.sheet_size+'00%'; return '<span class="emoji-outer emoji-sizer" data-unicode-smiley="' + self.data[idx][0][0] + '"><span class="emoji-inner" style="' + style + '"' + title + '>' + text + '</span></span>' + extra; }else if (self.use_css_imgs){ return '<span class="emoji emoji-' + idx + '"' + title + ' data-unicode-smiley="' + self.data[idx][0][0] + '">' + text + '</span>' + extra; }else{ return '<span class="emoji emoji-sizer" data-unicode-smiley="' + self.data[idx][0][0] + '" style="background-image:url(' + img + ')"' + title + '>' + text + '</span>' + extra; } } return '<img src="' + img + '" class="emoji" ' + title + ' data-unicode-smiley="' + self.data[idx][0][0] + '"/>' + extra;

In the data-unicode-smiley attribute I can now catch the original unicode smiley and add in to the text box. Of cource it will not work, if I call the replace_unified function again. Right now the with the emoji will be inserted into the attribute, which destroys the html - I think that such cases should be catched by this library, too!?

Could you put js-emoji on npm as well? It'd be cool if we could keep track of js-emoji versions the same way we do with our other packages. (we'd prefer not to add bower just for js-emoji).

I understand that the sprite sheets are probably a more optimized approach to delivering emoji images, but I have a situation where I need to inject the emoji images into a contenteditable div and the nested structure of the spans returned by replace_colons has proven difficult.

If I wanted to use the individual images what would be the best way to do so?

It seemed like they were named according to their codepoints 1f171.png, but some appeared to be named according to surrogate pairs like 0032-20e3.png.

The category is available in the initial json from emoji-data. Do you think it would be interesting to add the information in the js library as well?

Hi. I stuck on replacing emoji to unified sign.
When i set emoji.replace_mode = 'unified' before replace, it always changed in emoji.init_env
Any help will be appreciated.

:) is supposed to change into an emoji, right? It doesn't work. Am I supposed to enable a specific mode or configuration?

Thanks!

When converting ☔, EmojiConvertor converts it to :umbrella_with_rain_drops: however it should be :umbrella:

When I convert emoji's like :man-kiss-man: / :man-man-girl-girl: : etc to Unified/Unicode (:man-man-girl-girl: -> 👨‍👨‍👧‍👧) that works fine.

But if I then execute replace_unified on 👨‍👨‍👧‍👧 it doesn't work.
It shows

instead of

(it does work when I paste that Unicode on Slack though).

Is this a bug in the code or am I doing it wrong?

$(function() {
                emoji.img_path = "https://server.com/assets/emoji";
                alert(emoji.replace_colons(':smile:'));
            });

Should return

<span class="emoji emoji-sizer" style="background-image:url('https://server.com/assets/emoji/img-apple-64/1f604.png')"></span>

But instead returns:

<span class="emoji emoji-sizer" style="background-image:url(/emoji-data/img-apple-64/1f604.png)"</span>

Also the filenames (img-apple-64) etc. don't seem to match up with the suggested emoji set:

https://github.com/github/gemoji/tree/master/images/emoji/unicode

which has hex-type filenames like 1f19a.png.

I'm probably doing some things completely wrong.

OS X and iOS aren't the only 2 OSs that ship with an Emoji font, Windows 8+ does as well (And it was backported to Windows 7), as it stands the script unnecessarily converts the emoji to images for these platforms when they're capable of displaying them.

I'm using AngularJS with RequireJS.
I tried every possible way to load the EmojiConvertor but without success...

require.config({
    paths: {
        'angular': 'bower_components/angular/angular.min',
        'jquery': 'bower_components/jquery/dist/jquery.min',
        'underscore': 'bower_components/underscore/underscore-min',
        'emoji': 'bower_components/js-emoji/lib/emoji.min'
    },
    shim: {
        'angular': {
            deps: ['jquery'],
            exports: 'angular'
        },
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'emoji': {
            exports: 'EmojiConvertor'
        }
    },
    waitSeconds: 0,
    deps: [
        'jquery',
        'angular',
        'underscore',
        'emoji'
    ]
});

My Controller:

define(['common/controllers'], function(controllers) {
    'use strict';

    controllers.controller('feedController', ['$scope', '$config', function($scope, $config) {
            var self = this;
            var emoji = EmojiConvertor();
    }])
});

And I'm getting Uncaught ReferenceError: EmojiConvertor is not defined in my controller.

Any thoughts?

☝️

Hello @iamcal,
First of all, its a amazing plugin. Thanks.

I've been using this plugin and it shows all the emoji's perfectly except the new Apple color emoji variations

Basically, I'm looping it through a series of strings containing the Unicode for the emoji. It converts almost all the Unicode strings except the new Apple color variations.

Here's the code which is generating the emoji's

emoji.img_path = '../emoji/img-apple-64/';
emoji.sheet_path = '../emoji/sheet_apple_64.png';
emoji.use_sheet = true;
emoji.init_env();
var auto_mode = emoji.replace_mode;

var thoughtString = jsonTextWithMarkup;
thoughtString = emoji.replace_unified(thoughtString);

Here's a screenshot of what is being replaced:

Hello,

I tried to import in a Angular 2 / Typescript project.

import * as emoji from 'emoji-js';

There is no error.

// console.log(emoji);
    ƒ (){

		var self = this;

		/**
		 * The set of images to use for graphical emoji.
		 *
		 * @memberof emoji
		 * @type {string}
		 */
		self.img_set = 'apple';

		/**
		 * Configuration details for d…

But when I do a emoji.init_env() for example I got this error :

TypeError: __WEBPACK_IMPORTED_MODULE_7_emoji_js__.init_env is not a function

Can you help me please ? Thank you

Hi, I need replace from unified to colons, like this: Hello world 😁 -> Hello world :grin:, how do it?

in map there are missing a couple of tags like :frowning2: or :hand_splayed:

Hello, an example, I have a feeling there are plenty of others:

I notice the current shipped emoji.js has a mapping for '0023' to #️⃣ but if I rebuild all the data afresh from all the submodules I end up with a mapping for '0023-fe0f-20e3'. The three byte version seems to be what OS X sends, while iOS7 sends a 2-byte version ''0023-20e3'.

Older versions of iOS send yet further versions, e.g. this page suggests iOS2-4 used 'e210', and I see that's covered by the softbank lookup in emoji.js (gets lost when I rebuild), though I have much less interest in supporting pre-iOS5 than I do current OS X 10.9.2 and iOS7

The images from the latest gemoji have both 2 and 3-byte versions (0023-20e3.png is a symlink to 0023-fe0f-20e3.png, but there's no 0023.png) and I'd like to support both versions, but not sure how I can get a mapping that includes them both in emoji.js.

A separate example that breaks in a different way is ☺️

iOS 5-6: 263a
iOS 7 and OSX 10.9.2: 263a-fe0f
emoji.js mapping (current and rebuilt): 263a, results in ☺️[]
gemoji: 263a.png and 263a-fe0f.png

Thanks!

It looks like this happened in 1a86f2a, I added a line-note where the change occurred (I believe).

eg: [smile]

after fixing #46, test coverage is at 100%, since the minified code only has one line. this is super dumb. coverage needs to be from the non-minified version

When I download this repo, there is nothing inside the emo-data folder... what am I doing wrong?

hi

I can't find emoji-data and .png files

where I can find it?

thanks

the problem is upstream in https://github.com/iamcal/emoji-data/blob/master/build/catalog_text_toemoji.txt#L23 but it means we don't detect it correctly

need to add tests, fix in emoji-data and then update js-emoji to pass tests

as pointed out in PR #58:

the usage guide includes emoji.css, which made me believe that the project might export a CSS file that needs to be imported, but I can only find the one used by the example. Should that be removed, or is the css file in /demo intended to always be required?

Please include a bower.json making it easy to pin versions. I was bitten by img_path being replaced by the new img_sets.

The 107 emoji with variant encoding are not being properly detected in replace_unified when they are encoded using the variant version of their encoding.

For examples, you can view the following in Chrome on my staging server which I have upgraded to output variant encoded emoji from internal API methods:

http://staging.emojitracker.com/details/2B50
In the header/title, I am exporting unicode char with variant encoding 2B50-fe0f. js-emoji is matching and replacing the first codepoint only (since it's the non-variant version of the same emoji glyph), leaving the naked fe0f which renders as a broken box. If you look at the streaming tweets you can see that ones from people using iOS6 are replaced properly, but those sending tweets from iOS7 with variant encoding this problem occurs.

http://staging.emojitracker.com/details/0031-20E3
In the new version of js-emoji the keycaps0-9 characters all migrated from being bare 003* to 003*-20E3 format. However, for some reason, the replace_unified method doesn't seem to catch these at all anymore. (On this one, look in the header to see this, since the ones I am feeding into the live tweets are currently only ones that match the old format.)

Not quite sure what's going on here, I tried to figure it out in the source but didn't have any luck. Halp?

I followed the instruction of your demo at demo

When I test In iphone 6, it works just fine if I convert emojis that are very common. But there are still some emojis I can't convert to colon style, their output are still emojis.

For example

• 🤣
• 🤡
• 🤠

my code:

var emoji = new EmojiConvertor();

emoji.img_sets = {
	'apple'    : {'path' : '/js-emoji/build/emoji-data/img-apple-64/'   , 'sheet' : '/js-emoji/build/emoji-data/sheet_apple_64.png',    'mask' : 1 },
	'google'   : {'path' : '/js-emoji/build/emoji-data/img-google-64/'  , 'sheet' : '/js-emoji/build/emoji-data/sheet_google_64.png',   'mask' : 2 },
	'twitter'  : {'path' : '/js-emoji/build/emoji-data/img-twitter-64/' , 'sheet' : '/js-emoji/build/emoji-data/sheet_twitter_64.png',  'mask' : 4 },
	'emojione' : {'path' : '/js-emoji/build/emoji-data/img-emojione-64/', 'sheet' : '/js-emoji/build/emoji-data/sheet_emojione_64.png', 'mask' : 8 }
};

emoji.use_sheet = true;
emoji.init_env();
emoji.img_set = 'apple';
emoji.replace_mode = 'unified';
emoji.text_mode = false;
emoji.colons_mode = true;
var str_out = emoji.replace_unified(str_in);

I'm capturing user input from a textarea. Before I throw that text to the server I'm converting emoji to colon syntax using:

var content = $('#post_reply_box textarea[name="reply_text"]').val()
emoji.text_mode = true;
content = emoji.replace_unified(content);

// send to server

Most of them are being converted properly from my iPhone, but several are not:

• heart
• relaxed
• point_up
• v
• etc...

When I output to the resulting string to the console the heart is displaying as :heart" and then when they are converted back it shows the heart but it also appends the invalid character rectangle as well. Am I converting them wrong or is it something else? I'm on iOS 7.

EDIT:
screenshot from iPhone

I installed the npm install but did not find the emoji.css file that is mentioned in demo.

It looks like the docs could use some sprucing up. The options documented seem incomplete, and feature like jquery.emoji.js aren't mentioned at all atm.

I'd be down to help get this library fully documented if you think I could help out, @iamcal!

which emoji version is used?
I'm missing some.
e.g. ping_pong, woman_playing_water_polo
life doesn't make any sense without WOMAN_PLAYING_WATER_POLO! :)

I've got 404 th error when i try open the demo link!Please check this

lib.text_mode = true;
emoji.replace_emoticons(':)') returns :slightly_smiling_face:
emoji.replace_unified("😊") returns :)
emoji.replace_unified("😊💾📽") returns :)floppy_diskfilm_projector

I personally was expecting all 3 methods to return only colon names, but maybe I'm missing something something.

Hi @iamcal,

I updated my emoji sheets and images to the latest files. Since then when I try to use the minified version of emoji.js, it will not show the correct emoji.

I'm using it with requirejs. First I thought it must be some issue caused by r.js optimizer but I tested it with both optimized and unoptimized versions.

Here are 2 screenshots of with and without minified js

Minified:

No minification:

Right now including this package in a package.json requires checking out the entire emoji-data repo which has a large amount of history. I know #28 discusses creating an npm package and there is https://www.npmjs.com/package/front-js-emoji by a 3rd party but not sure if a stop gap of not the full history was considered (so non sub-module).

This is even though the final build size is only 90 megs.