When emoji image is needed about ngx-emoji-mart HOT 15 CLOSED

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

from ngx-emoji-mart.

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

from ngx-emoji-mart.

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

from ngx-emoji-mart.

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?

from ngx-emoji-mart.

works for me 👍

from ngx-emoji-mart.

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.

from ngx-emoji-mart.

@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.

from ngx-emoji-mart.

@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.

from ngx-emoji-mart.

@scttcper Thanks a lot for the new emojiSpriteStyles method! 👍

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!

from ngx-emoji-mart.

@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.

from ngx-emoji-mart.

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

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.)

from ngx-emoji-mart.

this.emoji is for which object?

from ngx-emoji-mart.

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

from ngx-emoji-mart.

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

from ngx-emoji-mart.

@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.

from ngx-emoji-mart.