Using js-emoji in Django

This is just a short post on how to use js-emoji in Django.

PMT has had emoji support for a while through django-emoji. No one ever uses it though, because users have no idea that their comments go through a filter that renders text like :tomato: into an image.

Sites like GitHub display a dropdown menu of emoji "suggestions" as soon as you type a colon into a comment box. I haven't implemented the js-suggester behavior yet, but we're one step closer now that the markdown previews in javascript are going through an emoji filter.

See where I've added emoji code in markdown_preview.js.

One thing to note is that js-emoji uses emoji images from emoji-data. Initially, I had included the img-apple-64 and img-apple-160 directories in our django application, which comprise of over 100MB and over 3000 separate image files. This caused a timeout problem in our deployment process, even after I manually uploaded these files to S3 where the assets are stored. Fortunately, js-emoji allows you to instead specify an emoji "sheet" using the use_sheet option. I removed the 3000 images and I'm now using the apple sheets from emoji-data.