tommoor / emojione-picker Goto Github PK

It loads all the emoji's of all categories for the first time itself, which slows up the browser. Can we load only the emoji's of currently selected category?

First render performance is poor due to the massive amount of emojis we have here, I have a few ideas to speed up the perceived load...

• Do a first pass render with just the dialog and headers
• Render the emojis in category chunks
• Move to faster loops (remove underscore?)

I got this error:

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "emojione-picker"
npm ERR! node v4.2.2
npm ERR! npm v2.14.7

npm ERR! shasum check failed for /var/folders/kh/sy_bkwjn3n7fsf2zbgrysb580000gp/T/npm-2582-81be861c/registry.npmjs.org/emojione/-/emojione-2.1.0.tgz
npm ERR! Expected: d0100d67661baaba2258e7033e3b0c614c722f5b
npm ERR! Actual: 4dd64b2fdc54a6b1b70e62e033eb2a72c64f972a
npm ERR! From: http://registry.npmjs.org/emojione/-/emojione-2.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

Hi,

with this change and using webpack with react, i get this error message:

Module parse failed: /Users/juRiii/dev/go/src/github.com/juRiii/.../node_modules/emojione-picker/node_modules/emojione/emoji.json Unexpected token (1:11) You may need an appropriate loader to handle this file type.

My solution is adding this to my webpack configuration:

loaders: [
    { 
        test: /\.json$/, 
        loader: "json-loader"
    }
]

and doing

npm install --save json-loader

A proper mention of this situation in README.md would be nice, it took me a while 😄

2.1.2 resolves an issue with this plugin not searching shortnames. Several Mastodon users are reporting that they are now seeing errors where the Sailfish OS browser doesn't recognize values.keywords.includes() as a function, which prevents them from using Mastodon's Compose tab.

I note that the Sailfish browser is based on an older version of Firefox (38, as opposed to the current release 43).

Is there a way to resolve this, or is the unfortunate answer that this isn't going to work until Sailfish updates their browser architecture?

When are you planning to upgrade to EmojiOne 3? Not sure if there's any breaking changes, might be as simple as changing the locked version?

Emojione provides a strategy file. I think it would be best if the component uses the official file instead: https://github.com/Ranks/emojione/blob/master/emoji_strategy.json

It would allow an easier update to Emojione version as well in the future :)

It would be awesome to have support for the different emoji sprite sheets available at https://github.com/iamcal/emoji-data

They support some of the native style emoji images as well as Twitter and emojione.

Using webpack.

This import is not standard: https://github.com/tommoor/emojione-picker/blob/master/src/picker.jsx#L4

and fails with webpack. If emojione is a dependency (and it is), it should be imported as emojione/emoji.json without node_modules.

I changed it locally and it it indeed loads the json, however there's another bug, hoping this image can show it:

Reverting to < 1.0.

Hello everybody, I need some help.
How can I wrap emojione-picker class into react-onclickoutside in order to use them together?

import React from 'react';
import ReactDOM from 'react-dom';
import OnClickOutside from 'react-onclickoutside';
import FileInput from 'react-file-input';
import EmojiPicker from 'emojione-picker';

class Conversation extends React.Component {
    constructor() {
        super();
        this.state = {
            text: '',
            isOpened: false
        }
    }
    showEmoji() {
        this.setState({
            isOpened: !this.state.isOpened
        });
    };
    render(){
        return (
            <div className="conversation">
                <div className="conversation__footer">
                    <div className="conversation__wrapper">
                        <a className={this.state.isOpened ? "fa fa-smile-o fa-2x conversation__icon conversation__icon--smile" : "fa fa-smile-o fa-2x conversation__icon conversation__icon--smile conversation__icon--opened"}
                                    aria-hidden="true"
                                    onClick={this.showEmoji.bind(this)}/>
                        <EmojiPicker className={this.state.isOpened ? " " : "display-none"} onChange={function(data){
                          console.log("Emoji chosen", data);
                        }} />
                    </div>
                </div>
            </div>

        )
    }
};

export default Conversation;

It looks like the emoji picker doesn't currently use emoji shortnames when searching. This causes some queries that should intuitively work to not return the expected results.

For example, searching for "wave" does not return the 👋 emoji, which has the shortcode :wave:. Searching for "wav" returns it, because the emoji is named "waving hand sign", but searching for "wave" does not.

Hi, how to actually insert the emoji to the text input/textarea?

My current project is using this plugin to pick emoji. Whenever user pick the emoji, the following function is triggered:

this.addEmoji(data.unicode);

 addEmoji(text) {
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const txt = '&#x' + text + ';';
    console.log(txt);
    console.log(selection);
    console.log(contentState);
    let nextEditorState = EditorState.createEmpty();
    if (selection.isCollapsed()) {
      const nextContentState = Modifier.insertText(contentState, selection, txt);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    } else {
      const nextContentState = Modifier.replaceText(contentState, selection, text);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    }
    this.onChange(nextEditorState);
  }

I use the DraftJS for the editor. Whenever I pick the emoji, the unicode is inserted to the editor but it doesn't display the emoji (it displays the raw unicode instead). Is there a step I am missing in using the emoji? Or is it the problem with DraftJS?

Thanks.

Hoping you could create same thing for Meteor. A package would be awesome. I would really appreciate it!! Thanks!

I am trying to use emojione but the css is not loading with my code (no errors), even i am not able to set style attribute to :
component code:
`import React from 'react';
import TextField from 'material-ui/TextField';
import {white} from 'material-ui/styles/colors';
import EmojiPicker from 'emojione-picker';
import Mood from 'material-ui/svg-icons/editor/insert-emoticon';
import Add from 'material-ui/svg-icons/content/add';
import Voice from 'material-ui/svg-icons/hardware/keyboard-voice';
import {blue200, blue700, darkBlack, lightBlack} from 'material-ui/styles/colors';

const style = {
position: 'fixed',
bottom: 0,
zIndex: 9999999,
background: white,
width: '100%',
padding: '5px 0 0px 0px'
}
const settings = {
imageType: 'png',
sprites: true
};
const emojiStyle = {
width: '100%'
};
const options = {
verticalAlign:'bottom',
padding:'10px 5px',
cursor: 'pointer',
color: lightBlack
};
const TextFieldExampleSimple = () => (

export default TextFieldExampleSimple;`

Webpack code:

`require('es6-promise').polyfill();
webpack = require('webpack');
module.exports = {
context: __dirname,
// plugins: [
// new webpack.optimize.AggressiveMergingPlugin(),
// new webpack.optimize.UglifyJsPlugin({
// compress: { warnings: false },
// comments: false,
// minimize: false
// }),
// new webpack.DefinePlugin({
// 'process.env': {
// 'NODE_ENV': JSON.stringify('production')
// }
// })
// ],
entry: {
jsx: "./src/index.jsx",
html: "./src/index.html",
},

output: {
    path: __dirname + "/static",
    filename: "bundle.js",
},
module: {
    preLoaders: [
        //Eslint loader
        // { test: /\.jsx?$/, exclude: /node_modules/, loader: "eslint-loader"},
    ],
    loaders: [
        { test: /\.html$/, loader: "file?name=[name].[ext]" },
        // { test: /\.css$/, loader: "file?name=[name].[ext]" },
        { test: /\.jsx?$/, exclude: /node_modules/, loaders: ["react-hot", "babel-loader"] },
        { test: /\.css$/, loader: "style-loader!css-loader" },
        { test: /\.json$/, loader: "json-loader" }
    ],
},
resolve: {
    extensions: ['', '.js', '.jsx']
},
eslint: {
    configFile: './.eslintrc'
}

};
`

Note: the component is inside an iframe

warning.js:44 Warning: Failed propType: Invalid prop search of type boolean supplied to Picker, expected string. Check the render method of Search.

I'm using the emoji picker in an application that supports multiple themes. I'm currently pulling in the emojione-picker css file and layering in overrides for each theme. It would be nice if certain elements, such as the search input, could inherit my generic element styles from my app theme without needing the overrides.

One option is to separate the base/layout styles into a standalone file, and put all aesthetic properties such as colors into a separate "default-theme.css" file. This would give users the flexibility to pull in the default theme file only if they want it.

Thoughts?

when i used emojione-picker in my chat module , when clicking on one emoji i could fetch the shortname in my chattext but when clicking on chat send,the shortname was not converted to the exact emoji as expected.what is the problem?? should i have to define a method to convert shortname to emoji??

We can store usage of the picker in localStorage and then use this to construct a frequently used tab.

shallowCompare is now a deprecated plugin, and React recommends using the build-in PureComponent instead.

https://facebook.github.io/react/docs/shallow-compare.html

Apologies, this is more of a question than an issue. Specifically, the picker has an option :upside_down: which is not renderable using either https://github.com/banyan/react-emoji OR https://www.npmjs.com/package/react-emojione

Can I ask what module you use to display emojis on the page with react?

Can you please show a working code example on how you use and reference directly the provided CSS from within the node_modules directory? I tried few different ways and so far no luck.

Following is what I have tried:

1. Converting the supplied CSS to JSON styles and passing it as styles to EmojiPicker component (used this tool):

const styles = {
    emoji_dialog: {
        width: "276px",
        height: "220px",
        background: "#fff",
        boxSizing: "border-box",
        borderRadius: "2px",
        overflow: "hidden",
        position: "relative",
        boxShadow: "0 0 0 1px rgba(0,0,0,0.1), 0 2px 15px rgba(0,0,0,0.1)"
    },
    emoji_dialog__emojione: {
        margin: "0"
    },
    emoji_dialog__emoji_dialog_header: {
        padding: "0 10px",
        backgroundColor: "#F5F7F9"
    },
    emoji_dialog__emoji_dialog_header_ul: {
        padding: "0",
        margin: "0",
        listStyle: "none"
    },
    emoji_dialog__emoji_dialog_header_li: {
        display: "inline-block",
        boxSizing: "border-box",
        height: "42px",
        padding: "9px 5px"
    },
    emoji_dialog__emoji_dialog_header_li_img: {
        width: "22px",
        height: "22px",
        WebkitFilter: "grayscale(100%)",
        filter: "grayscale(100%)"
    },
    emoji_dialog__emoji_dialog_header_li_svg: {
        width: "22px",
        height: "22px",
        WebkitFilter: "grayscale(100%)",
        filter: "grayscale(100%)"
    },
    emoji_dialog__emoji_dialog_header_li_active: {
        background: "#fff"
    },
    emoji_dialog__emoji_dialog_header_li_active_img: {
        WebkitFilter: "grayscale(0)",
        filter: "grayscale(0)"
    },
    emoji_dialog__emoji_dialog_header_li_active_svg: {
        WebkitFilter: "grayscale(0)",
        filter: "grayscale(0)"
    },
    emoji_dialog__emoji_row: {
        boxSizing: "border-box",
        overflowY: "hidden",
        paddingLeft: "10px"
    },
    emoji_dialog__emoji_row__emoji: {
        display: "inline-block",
        padding: "5px",
        borderRadius: "4px"
    },
    emoji_dialog__emoji_category_header: {
        display: "table-cell",
        verticalAlign: "middle"
    },
    emoji_dialog__emoji_category_title: {
        fontSize: "18px",
        fontFamily: "sans-serif",
        fontWeight: "normal",
        color: "#444"
    },
    emoji_dialog__emoji_category_heading_decoration: {
        textAlign: "right"
    },
    emoji_dialog__modifiers: {
        listStyle: "none",
        padding: "0",
        margin: "0",
        verticalAlign: "middle",
        whiteSpace: "nowrap"
    },
    emoji_dialog__modifiers_li: {
        display: "inline-block",
        padding: "0 2px"
    },
    emoji_dialog__modifiers_li_last_of_type: {
        paddingRight: "0"
    },
    emoji_dialog__modifiers__modifier: {
        display: "inline-block",
        borderRadius: "10px",
        width: "15px",
        height: "15px",
        position: "relative"
    },
    emoji_dialog__modifiers__modifier_active__after: {
        content: "\"\"",
        display: "block",
        position: "absolute",
        width: "7px",
        height: "7px",
        borderRadius: "10px",
        border: "2px solid #fff",
        top: "2px",
        left: "2px"
    },
    emoji_dialog__modifiers_li_hover: {
        MozTransitionDuration: "200ms",
        WebkitTransitionDuration: "200ms",
        transitionDuration: "200ms",
        WebkitTransform: "scale(1.2)",
        MozTransform: "scale(1.2)",
        transform: "scale(1.2)"
    },
    emoji_dialog__emoji_search_wrapper: {
        padding: "6px 16px"
    },
    emoji_dialog__emoji_search: {
        fontSize: "12px",
        padding: "6px 4px",
        width: "100%",
        border: "1px solid #ddd",
        borderRadius: "4px"
    },
    emoji_dialog__emoji_categories_wrapper: {
        position: "absolute",
        top: "42px",
        bottom: "0",
        left: "0",
        right: "0"
    },
    emoji_dialog__emoji_search_wrapper____emoji_categories_wrapper: {
        top: "83px"
    },
    emoji_dialog__emoji_row__emoji_hover: {
        background: "#F5F7F9"
    },
    emoji_dialog__emoji: {
        width: "22px",
        height: "22px"
    }
};

which apparently doesn't work :-(

2. I also tried binding the CSS to classnames and that also failed:

import styles from "emoji-picker/css/picker";
const cx = classNames.bind(styles);

and

<EmojiPicker className={cx("emoji_dialog")}
            onChange={function(data) { console.log("Emoji chosen", data); }}
            emojione={{imageType: "png", sprites: true}}
            search={true}/>

Any idea where I am doing wrong?

Thanks you :-)

In search when I search for poop I would expect the poop icon to surface. The issue is that the regex for search is off of the keywords but it also should be off the name

Without JSX compilation needed

I wanted to setup the project to start hacking a bit inside, and npm start is broken for me.

~/d/f/emojione-picker master ❯ yarn start
yarn start v0.22.0
$ concurrently "npm run watch" "http-server ./examples" 
[1] Starting up http-server, serving ./examples
[1] Available on:
[1]   http://127.0.0.1:8080
[1] Hit CTRL-C to stop the server
[0] 
[0] > [email protected] watch /dev/forks/emojione-picker
[0] > watchify --extension=.jsx -d -t [ babelify ] src/*.jsx preview.jsx -o lib/preview.js
[0] 
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /css/picker.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /node_modules/emojione/assets/css/emojione.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /lib/preview.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /css/picker.css" Error (404): "Not found"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /node_modules/emojione/assets/css/emojione.css" Error (404): "Not found"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /lib/preview.js" Error (404): "Not found"

After npm run watch I've got:

Error: Cannot find module 'C:\emojione-picker-master\src*.jsx' from 'C:\emojione-picker-master'

Currently, the component is using the full underscore. Would it be possible to remove the unnecessary functions and only use and import the specific functions from lodash instead?

Maybe only throttle would be needed.

I'm trying out a slightly modified version of this package in two seperate projects. In one (which is an Electron applicatoin), for all intents and purposes of this issue, it works as expected.

The other is a small widget built with React. I ported over the Emoji Picker from the other project, but when opening the picker in the widget, the various emojis load extremely slow (~2 seconds) and cause the widget to become unresponsive.

What might be causing this issue?

The user experience using the component is currently not great. If I scroll a bit too fast (but an acceptable speed for a user), we'll see that the images are not loaded.

I am using your lib inside my chat input component, which uses textarea onChange when user enters something to update the state. However this state change triggers EmojiPicker to render every time the user presses a key. Understandably this causes CPU use to go through the roof and input slows to a crawl.

Suggestion:

Add shouldComponentRender() handling using fx react-addons-shallow-compare:

shouldComponentUpdate(nextProps, nextState) {
  return shallowCompare(this, nextProps, nextState);
}

Is there a way to disable modifiers?
If not shall I raise a PR?

I don't want to hide it using css instead I do not need to render it.

hi,
in the example preview.js seem missing....
Do you have an example how to setup?
Thanks

This would allow us to pop up a dynamic picker based on what's been typed in an input or textarea

Can you please update react-virtualized to 9.x please. Being behind is causing webpack to pull in react-virtualized into my project twice since emojione-picker is on an older version.

The specification of Content Security Policy
describes as the following:

This document defines Content Security Policy, a mechanism web applications can use to mitigate a broad class of content injection vulnerabilities, such as cross-site scripting (XSS).

To apply Content Security Policy, we need to set a nonce to style element appended by react-virtualized. I have made a change for react-virtualized. (bvaughn/react-virtualized#663)

emojione-picker is also required to be altered to correspond the change. I have also finished to create a change for emojione-picker fcb244d, but we may wait for a new version of react-virtualized including its Content Security Policy support.

Emojione includes different skin tones, it would be nice to include an option that will enable switching of this within the picker and remember your setting

similar to:

By default emojione loads a small png for each emoji, but there's a spritesheet option that loads only one image then renders via background-position for each emoji.

It's simple to turn it on. Just add these two lines of js before rendering the Picker:

emojione.imageType = 'png'; emojione.sprites = true;
Hope this helps someone. Awesome little component here, @tommoor, thank you! Here's a screenshot of my (not yet public) implementation which is going on a dark background:

It would be great if we could navigate through the emoji list using the keyboard, like the emoji picker in Slack

Food => "Food & Drink"
Travel => "Travel & Places"

Hi! First of all thank you for great lib! I'm facing with some problem: when I click on any people filters button nothing happens. I expect that images should be filtered. Any ideas?

If there is no any way to make it work correct, maybe it possible to hide this filter?

How can I get this to run on my website? the /demo/index.html doesn't show anything the the lib/preview.js is missing.

I have this warning threw by React :

Warning: Unknown props `unicode_alternates`, `category`, `emoji_order`, `aliases`, `aliases_ascii`, `keywords` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Emoji)
    in Emoji (created by Picker)
    in li (created by Picker)
    in ul (created by Picker)
    in div (created by Picker)

I use React 15.2.1

Hi I'm developing an Electron based application and use emojione-picker. However I soon noticed a serious issue that all emoji files (png and svg) couldn't be loaded since there's no specific schema defined. In the preview.js, the src is setup like src="//cdn.jsdelivr.net/emojione/assets/png/1f91e.png?v=2.2.6:1" which would be interpreted into * file://* schema in Electron...

Is there a better way to override the src schema or how about specify the schema as http:// somewhere in the code?

Tests should be added to make sure everything works as expected :)

Sorry but can you describe how to use the example?
I can't use the example. It shows nothing when I open index.html in browser.

Hi,

I just wanted to check and see if there's any support for custom emojis? Will I need to fork this repo and add them to the strategy.js file? Or is there a way to extend it without needing to do a fork?

Any ideas you have will be greatly appreciated.

Thanks!

A live example would sell this component better