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