robertmenke / rm-emoji-picker Goto Github PK

I found out that the source map is included on the dist file. Importing this library, as suggested on the readme, will result it huge bundle file. Could we have it removed?

The unicode emojis appear small. Although I can increase the fontsize, this would make the rest of the text also larger and doesn't look good. One solution is to have the emoji character placed inside of an element such as a span and set the fontsize on the span to be larger. Adding a span however is fairly complex when the emoji gets added from a contenteditable and you have a lot of other text mixed in.

It would be nice if you could extend the render method so that it accepted a second optional parameter that the emoji would get encased in before you returned the rendered text. For example:

let text = EmojiPicker.render("I love cats :smiley_cat: but dogs too", "<span class='cats'>", "</span");

This would render to:

I love cats <span class='cats'>😺</span>

I could then set the fontsize on the "cats" class without affecting the remaining text. Alternatively, you could include a callback in the render function that gets called prior to render function returning the rendered text. The callback would provide the emoji character. The callback could then append and/or prepend stuff to the emoji (such as the span) and return this. You would then use this in the rendered code instead of the emoji character alone.

Hi,

I have a problem with this : C:\path\project\node_modules\rm-emoji-picker\dist\EmojiPicker.js:1

so that crash my app... Am i missing somehing ? I said that because they have no issue about this.

Can you help about that please ?

ES6 is obligatory ?

Thanks.

Make the examples directory publically available, e.g. with gh-pages.

While working on #18 I've had some trouble getting the tool to build.

After a few misfires I ran webpack and got a build - but it doesn't seem to have images in it.

Could we get some notes on the actual build process? (Happy to PR changes to the readme, if someone can point me in the right direction. :D )

Wondering if there is anything that can be done implementation or config wise to speed up the initial loading of the picker?

https://www.useloom.com/share/81e1668051824371b70ea93e63d10c0f

Searches for Symbols 100 and interrobang do not appear in results. It's possible others don't as well, but I stopped after two.

I would like to use your widget but I am running Electron, which uses Chromium version 56. The import statement is not supported in Chrome versions less than 60.

I was able to do the following:

var EmojiPicker = require("rm-emoji-picker");

var picker = new EmojiPicker.default();
const icon = mContent.find(".edtAccountAvatar")[0];
const container = mContent.find(".discMessageInputContTop")[0];
const editable = mContent.find(".edtEnableRatingChk")[0];

picker.listenOn(icon, container, editable);

There was no need for the import. The code runs without any issues but when I click on my icon, nothing happens. Nothing is displayed.

Any way to make this work on Chrome versions earlier than 60?

UPDATE:

The DOM hadn't finished loading. I added a delay to wait for the DOM update and then it worked.

How I can render letter like :), <3, :( ...

I want EmojiPicker.render('<3") give me 💗

Is it possible ?

event is undefined error by firefox .

  openPicker() {
        ...
        this._onTooltipClick(tooltip, event);  <- this is undefined.
        ...
  }

and I want to change rm-tooltip#setClickCallback;

Tooltip.prototype.setClickCallback = function(event, func){

    if (event) {
      event.stopPropagation();
    }

    this._unique = 'click.' + new Date().getTime();

    $("html").on(this._unique, event => {
        func.call(this, event.target, this.$tooltip);
    });
};

can you explain me how I can use this from inside express html page? Import statment doesnt work(due chorme version)

I'm having trouble pulling our new version from NPM, and I think it's 'cause I forgot to include a version bump in my PR - sorry. :/

Could we get a version bump and a new package published?

Is it possible to have the picker use the sheet images instead of the unicode characters. I prefer the unicode characters but they are small and while I can change the fontsize, it changes for all the other text which is what I want to avoid. You have the use_sheets : true option but I believe it only works on Windows. I tried it on my Mac but it doesn't do anything.

I need textarea exmples.

When I set the picker to listen on a textarea as the input, calling the picker.getText() method returns a line of html instead of returning the unicode value.

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

I have noticed that if I change the textarea to an editable div, that this method returns unicode as expected. However, the page I'm working with already has several things relying on this textarea, and I was hoping to avoid reworking the page to work with an editable div if I don't have to.

Would it be possible to add a configuration var to select which image set to use? I see you can set img_var with js-emoji, but I saw no way to pass that down. Otherwise, everything else works great. This is the only picker I've found that actually works with my build system.

Could not find a declaration file for module 'rm-emoji-picker'. 'e:/vscode/code/chat ui/node_modules/rm-emoji-picker/dist/EmojiPicker.js' implicitly has an 'any' type.
Try npm install @types/rm-emoji-picker if it exists or add a new declaration (.d.ts) file containing declare module 'rm-emoji-picker';ts(7016)
plz, help to solve it

The scrollbar handle/slider for a list of emoji is not visible. it's hidden under the Search bar.

While I see this is to achieve the effect of the emoji scrolling under an opaque header, a user may not realize they can scroll within the popup to reveal additional emoji. I'd favor seeing the scrollbar over the opacity effect if both can't be achieved.

Setting font-family: initial !important overrides the user's font setting and defaults to the browser's serifed font. The use of serif and sans-serif fonts in the same picker does not look as clean.

The font-family should be set to the same face and size as the word "Search" to appear consistent with the rest of the picker, and not use !important so that the application's stylesheet could override the default setting.

When I select a several emojis consecutively in the div.contenteditable are not created consecutively but rather change the first emoji,

How can I remove all content within div.contenteditable?
When I write and do line break and at the end I delete all the content stays one or two '

Thanks heaps for a great tool - my teammates were pretty impressed with how quickly I got our app up and running with it. :)

Testing on IE11 though, I'm pretty sure I've run across this:
https://stackoverflow.com/questions/22914075/javascript-error-800a025e-using-range-selector

...in the selectElement method.

Any awareness of this issue? (I'm planning to try and carve out a solution and PR it.)

Hi, may i know how to use this emoji with react? i tried using this emoji in my JSX file, and the emoji button not able to display the emoji selection. do i miss something?

Hello, it is possible to avoid the picker close action when we choose an emoji ?

when I have several emojis and I want to go back to insert another emoji, I have to press 3 times the keyboard to see the cursor

I am using VueJs and Firebase for a chat application, my problem is when I press ENTER after typing in the div.contenteditable I want to delete the contents of the div but it generates two 'div>br' and the cursor to the end of the two div.
Div.contenteditable

<div id="input-container" class="input-container">
    <div class="input-emoji">
        <div id="input-div" class="input-div" @keydown="keyDownTextField" 
contenteditable="true" v-el:container-text focus></div>
    </div>
</div>

Code Javascript

methods: {
      keyDownTextField (e) {
        if (e.keyCode === 13 && e.shiftKey === false) {
          this.sendMessageText()
        }
      },
      sendMessageText () {
        let _temp = _.trimStart(this.picker.getText())
        if (_temp.length > 0) {
          this.clearInputDiv()
          // send message Firebase
        }
      },
      clearInputDiv () {
        const node = document.getElementById('input-div')
        while (node.firstChild) {
          node.removeChild(node.firstChild)
        }
      }
}

And when I use the delete content function it creates two divs within the contenteditable

<div id="input-div" class="input-div" contenteditable="true" focus="">
    <div><br></div>
    <div><br></div>
</div>

I noticed that when I included your picker in my app, the file size went up by 100 mb which is a huge amount. After investigating, I discovered that your app was using the dependency emoji-js which in turn has the dependency emoji-datasource. I removed both of these from my app and your emoji picker worked fine without it. Can you explain why those dependencies are needed? What will I be losing if I leave them out?

Hi Robert,

Is there any possibility to call function in EmojiPicker object with React to render out from symbol/text to emoji? or is there any function to use EmojiPicker mapping to the sheet in React?

because i using textarea as editor and saving symbol/text in my DB but when display i want to render it to emoji?

Thank you

This is likely due to the jQuery.click event not firing events on iOS. The events fire like this:

1. Click emoji #1: #1.MOUSEENTER
2. Click different emoji #2: #1.MOUSELEAVE #2.MOUSEENTER

A work around in the mean time is:

    var picker = new EmojiPicker(...);
    picker.categories.forEach(function(cat) {
      cat.emojis.forEach(function(emoji) {
        emoji.$emoji.on('touchend.emoji', function() {
          if(emoji._bubble){
            emoji._bubble(picker.defaults.events.SELECTED, emoji);
          }
        });
      });
    });

Hi,

Need some info on integrating with Angular 2/4 project.
Any information regarding this is appreciated.

Thanks.

I'm having some trouble to make it work on Windows because getText - which I use to save the unicode into the database - returns an HTML on Windows (using props use_sheets and sheets).

I have no problems with it on Mac, using both textarea/div[contenteditable="true"].

If someone has an implementation with AngularJS integration, please share. Thank you.

Hi. Is there any way to load plugin just in browser without webpack?
I'm trying:

var picker = new EmojiPicker();

but got EmojiPicker is not defined

I figure out, that lib is accessible via window.default, but anyway got error: (0 , g.default) is not a function
in:

key: "_getWrapper", value: function () {
    return (0, g.default)('<span class = "emoji-char-wrapper ' + this.hover_color + '" data-name="' + this.full_name + '" data-category="' + this.category + '"></span>')
}

In a new directory:

$ yarn add rm-emoji-picker
<success>
$ yarn check
error "rm-emoji-picker" is wrong version: expected "0.4.0", got null

Changing the version number in the package.json from 0.4.01 to 0.4.1 fixes this issue.

Hey! Im using FontAwesome 5+ on my project,
and the icons inside the emojii drawer is calling some deprecated icons
like fa fa-smile-o or fa fa-futbol-o (mostly '-o' appended classes)

I suggest appending the new classes and leaving the old one as a fallback for FontAwesome 4 Users.
as this (in this order) might work: class="fa fa-smile-o fas fa-smile"

When hovering over the first emoji, the footer shows grinning. Slack, for example, shows :grinning: to indicate that you can type that into the body of your input field.

If the application does not support entering the keyword into the input field, the footer should not be displayed at all. The current implementation suggests grinning could be typed into the input field and produce an emoji.

Suggest adding a show_footer = true as one setting, where false would hide the footer div if keywords are not supported by the input.

Then, perhaps a second setting: emoji_delimiter = ":" which would wrap around the keyword in the footer if it's displayed.

Hi, it seems that there are problems with positioning of emojis (it's /examples/index.html on Windows 10): http://i.imgur.com/SbYceMY.png

I saw that you have it under Future "Add frequently used category by logging emoji selections into localStorage.".

I am wondering about the timeline of this.

Not sure if this is related to the lib itself, but it seems to work when using the native mac emoji picker. Video showcasing the issue (which itself is on the video page where you can test it with the comment input on the right):

https://www.useloom.com/share/e97afb9bf67a4e228c3244ab9e23582b