Angular 2+ pipe to replace emoji-mart emojis with an html element displaying their image representation

replace-emojis.pipe.md

Moved

MOVED to npmjs.com/GitHub:

• npmjs.com: https://www.npmjs.com/package/ng-utf8-emojis-to-images
• GitHub: https://github.com/lentschi/ng-utf8-emojis-to-images

@Arjun-Shinojiya Sorry, I'm not sure what you mean to say. In my sample there is text after the last emoji and it is displayed. Could you maybe create a failing StackBlitz sample? (Then I might be able to help.)

@lentschi In your this example https://stackblitz.com/edit/replaceemojis-editor?file=src%2Fapp%2Fapp.component.html . I changed the line number 40 code to
this.editorHtml = this.sanitizer.bypassSecurityTrustHtml(span.outerHTML + this.contenteditable.nativeElement.innerHTML); .I done this because I want to insert emoji after last character of the sentence . Its working fine but now the issue is when I insert the emoji and after that if I type any word or character then It won't get display but after clicking on save button, the entered text gets displayed. Hope you understand the issue.

@Arjun-Shinojiya Ah, that was because you also need to set span.setAttribute('contenteditable', 'false'); for the newly inserted emoji. (Else you type text into the emoji span, which cannot be seen)
I updated the StackBlitz sample and also added a way of inserting the emoji at the current cursor position (if the editor is focused otherwise it will appear at the end).

This is still far from being a perfect editor (It's just a sample on how to use the pipe!). For example the focus on the contenteditable will be lost after inserting an emoji. I think to prevent that you will have to remove the input [innerHTML]="editorHtml" and handle setting the html in the component code. (Otherwise the content will be replaced and the cursor position is lost)
Also note, there's some issue with deleting emojis in current Firefox versions with the backspace key (interestingly the delete key works). I googled a bit and there seems to be a workaround, but I haven't implemented it (out of the scope of this sample too.)

Hello, I'm getting the following

Argument of type '(set: string, sheetSize: number) => string' is not assignable to parameter of type 'number'

Any help? I'm using version 3.0.3 of emoji mart. They added a new param called sheetRows which is a number in here

                    const styles = this.emojiService.emojiSpriteStyles(
                        matchingData.sheet,
                        set,
                        size,
                        sheetSize,
                        backgroundImageFn
                    );

Just between sheetSize and backgroundImageFn

@asdrubalivan I haven't had time to try this out yet, but the new sheetRows parameter is optional - could you not just replace it with undefined and it would still work?

@asdrubalivan I fixed it, but not in the Gist: Due to the ongoing popularity of this Gist, I decided to turn it into a library after all:
npmjs.com: https://www.npmjs.com/package/ng-utf8-emojis-to-images
GitHub: https://github.com/lentschi/ng-utf8-emojis-to-images