When emoji image is needed

[DanielKucal]

The goal: user wants to replace native unicode emojis by images or insert it into a contentEditable. The problems:

1. Dynamically created components can't be inserted to DOM in proper place.
2. Performance: many components make it slow. We can already observe it while opening emoji picker.

The workaround is to dynamically create the component, set emoji properties like id and set, call ngOnChanges(), hide generated component, wait for it to load, take HTML, destroy generated component and finally replace the unicode emoji by image...

Desired solution: there should be built-in service method to get HTML code for given emoji, getter or field with HTML / style in EmojiEvent. Which solution would be the best? If it is a method - which service is the most sufficient for it?

[scttcper]

i think i follow you.

Is this like when twitter replaces your emoji with their emoji?

It looks like this is how the original emoji-mart is doing it https://github.com/missive/emoji-mart/blob/4715fe8f487a51796127626db23b3708a58b2539/README.md#using-with-dangerouslysetinnerhtml

[DanielKucal]

Is this like when twitter replaces your emoji with their emoji?

Yup, just something like that. I am not sure if it'd work with dynamically added directive in Angular, I guess not... Probably the service method will be the best solution, we can improve it later if needed. Is EmojiSearchService a proper place for it? I'd generally rename EmojiService as is seems for internal use only and make a service with useful methods for library user under that name. What do you think?

[scttcper]

works for me 👍

[ghost]

Could you provide any estimate on the issue? It'd be really helpful to have the possibility to get an image or html markup from the native unicode character or string id.

[DanielKucal]

@asmironov, hard to give any estimation. I need to refactor and standarize a lot of code... I will try to finish it in this week, not sure if I will have enough time though.

[zamananjum0]

@scttcper ,Can you create a stackbiltz example for above mention snapshot of textarea or emojiPicker. I'really need complete example of ngx-emoji-mart with chat input or textarea with binding.

[scttcper]

should be easier with the new function added to emoji service https://github.com/TypeCtrl/ngx-emoji-mart#display-emoji-as-custom-element

[lentschi]

@scttcper Thanks a lot for the new emojiSpriteStyles method! :+1:

My needs went a bit further though. I didn't want to store emojis in their image representation but as unicode. (Mobile devices don't need the image representation as they replace them with their native fonts. When entering a unicode emoji via the mobile device's keyboard instead of using emoji-mart, that would lead to different types of emojis for desktop users, the mobile ones looking ugly on desktop.)

So when saving them as unicode instead, I needed a way to transform a whole block of html (stored in my DB) to display images instead of unicode emojis.

Therefore I came up with this angular pipe: https://gist.github.com/lentschi/8600f9b6ea7e7f5178f40a36f3053de7 -> To use it: <div [innerHTML]="messageWithUnicodeEmojis | replaceEmojis"> (Of course this pipe should only be applied to non-mobile devices - I added a matching condition in my project.)

I don't know if there is an easier way to do that with your lib already...? If so please, tell me! :-) If not, feel free to somehow integrate my gist in your lib, should you find it useful!

[scttcper]

@lentschi looks good thanks for the example, but i think everyone will end up having their own storage and display needs so i don't really want to maintain it.

The only part that might be easier now is the styles part of your code https://gist.github.com/lentschi/8600f9b6ea7e7f5178f40a36f3053de7#file-replace-emojis-pipe-ts-L51-L60 but most people will need custom styles anyway to match their page.

[lentschi]

@scttcper Yeah, of course, you're right - My code is a bit too specific. :blush:

But maybe you could just add a method that takes a replace callback for each unicode emoji to EmojiService:

const htmlWithSprites = this.emojiService.replaceUnicodeEmojis(textOrHtmlWithUnicodeEmojis, (emojiData: EmojiData, offset: number): string => {
  const styles = this.emoji.emojiSpriteStyles(emojiData.sheet, 'twitter');
  const el = document.createElement('div');
  Object.assign(el.style, styles);
  // PLUS add any custom styles ...

  return el.outerHTML;
});

That would facilitate building custom pipes etc. to replace native emojis with sprites.

Though I totally understand, if adding that would be too difficult to maintain! (I wonder how it is done with the original library, or if noone else had this requirement.)

[RangerGuan]

this.emoji is for which object?

[lentschi]

Just in case anyone should still stumble across this: There was a bug in my gist so I just updated it. I also added some more options (described in the comments at the top of the gist) and added a StackBlitz sample: https://stackblitz.com/edit/pt-emoji-wcoxb9

[Alec-Aldrine-Lakra]

Yeah but then why choosing a country flag displays the country code rather than the flag ? What is the solution for that ? @lentschi

[lentschi]

@Alec-Aldrine-Lakra Are you referring to my most recent StackBlitz sample?

If yes, I'm afraid I can't reproduce your issue. Flags are displayed correctly in recent versions of Firefox & Chrome with all image sheets. If no, please provide a failing sample (e.g. on StackBlitz), then I might be able to help.

[lentschi]

Due to ongoing request I moved my former Gist extending ngx-emoji-mart to its own library: npmjs.com: https://www.npmjs.com/package/ng-utf8-emojis-to-images GitHub: https://github.com/lentschi/ng-utf8-emojis-to-images