Ngx-quill: Emoji alternatives

[Fzwael]

Hello,

I've been using ngx-quill for some time now, our use case is pretty basic (send email functionality) and we are using quill-emoji as well.

Now when we tried to check our build size & network issues we noticed that there is one image used by quill-emoji (6.8 MB), knowing that most of the browsers will only cache images that are less than 5MB this would create a problem in a production environment.

I also noticed that we are using the same code as ngx-quill-example hence the same problem can be seen there as well :

Do you know of any solution for this problem ? something that uses native emojis or maybe seperate png files like they do with twemoji

PS: I already posted this question here : quill-emoji/issues/95

Thanks 😄

[KillerCodeMonkey]

nope. i do not know any alternative. i just added an example for quill-emoji, because people were opening issues about how to integrate it.

[KillerCodeMonkey]

@Fzwael i will close this issue. But feel free to let us know if you have an answer

[Fzwael]

@KillerCodeMonkey , I couldn't find an "easy" solution to work with Quill directly.
So here is what I did, I picked an emoji plugin (in my case it was emoji-button) and I just added the emoji to Quill editor manually via this code :

<button type="button" #customEmoji class="ql-custom-emoji"></button>

  @ViewChild('customEmoji') emojiButton: ElementRef;
.
.
.
  editorCreated(editor) {
    // Init the custom emoji picker
    const emojiButtonElement = this.emojiButton.nativeElement;

    const picker = new EmojiButton({
      categories: ['smileys', 'animals', 'objects', 'people'],
      zIndex: 100, // Since the send email z-index value is 99
      showPreview: false,
      showSearch: false,
      showVariants: false,
      style: 'twemoji'
    });
    // Since emoji-button is returning a html string when working with twemoji we will extract the img src manually
    const regex = /<img.*?src="(.*?)"/;

    picker.on('emoji', (emoji) => {
      const srcImage = regex.exec(emoji)?.[1];
      editor.insertEmbed(editor.getLength() - 1, 'image', srcImage);
    });

    emojiButtonElement.addEventListener('click', () => {
      picker.togglePicker(emojiButtonElement);
    });
  }

It's not ideal but it's working for now 🤞