Twemoji in Rails

[JuanitoFatas]

If you want to integrate Emoji for your Rails project, Twemoji would be a good choice, gemoji is also available. They're all open sourced and free to use if you properly attribute.

Twemoji provides set of Emoji Keywords (Names) like :heart:, :man::skin-tone-2:, :man-woman-boy::

So you can let your users type these keywords and store the simple string in your database instead of storing the real Unicodes which may be troublesome for some database (read: older version of MySQL).

Integrate with Rails

Install Twemoji:

# Gemfile
gem "twemoji", "~> 3.0.0"

View

And just add a simple View Helper:

module EmojiHelper
 def emojify(content, **options)
 Twemoji.parse(h(content), options).html_safe if content.present?
 end
end

Then in where your content contains emoji, apply this view helper:

<%= emojify post.body %>

In the post.body that all occurrences of emoji keywords will be replaced into Twemoji image.

Twemoji by Twitter provides you scalable SVG images that powered by kind folks from MaxCDN, e.g.:

https://twemoji.maxcdn.com/2/svg/1f60d.svg

PNG is also available of size 72x72: https://twemoji.maxcdn.com/2/72x72/1f60d.png.

Add a little CSS:

img.emoji {
 height: 1em;
 width: 1em;
 margin: 0 .05em 0 .1em;
 vertical-align: -0.1em;
}

and make sure your HTML is unicode-friendly:

<meta charset="utf-8">

Voilà, very simple.

Mailer

In your mailer, you can fallback the SVG images to PNG format by passing in file_ext option:

<%= emojify post.body, file_ext: "png" %>

Front-end

Provide a json which contains all "emoji name to unicode" mappings for your front-end:

# emojis.json.erb
<%=
 Twemoji.codes.map do |code, _|
 Hash(
 value: code,
 html: content_tag(:span, Twemoji.parse(code).html_safe + " #{code}" )
 )
 end.to_json.html_safe
%>

Twemoji gem also provides mappings for SVG and PNG, but they are not loaded by default:

> require "twemoji/svg"
> Twemoji.svg
{
 ":mahjong:"=>"https://twemoji.maxcdn.com/2/svg/1f004.svg",
 ...,
 ":shibuya:" => "https://twemoji.maxcdn.com/2/svg/e50a.svg",
}

> require "twemoji/png"
> Twemoji.png
{
 ":mahjong:"=>"https://twemoji.maxcdn.com/2/72x72/1f004.png",
 ...,
 ":shibuya:" => "https://twemoji.maxcdn.com/2/72x72/e50a.png",
}

If above data fits your use, you can require and use them:

With this json in place, you can then use a autocomplete JavaScript library to implement the autocomlpete feature:

Twemoji also plays nicely if you implement markdown with html-pipeline.

Add a EmojiFilter:

module HTML
 class Pipeline
 module Twitter
 class EmojiFilter < HTML::Pipeline::Filter
 def call
 Twemoji.parse(doc,
 file_ext: context[:file_ext] || 'svg',
 class_name: context[:class_name] || 'emoji',
 img_attrs: context[:img_attrs],
 )
 end
 end
 end
 end
end

and include the EmojiFilter in your filter chain:

HTML::Pipeline.new [
 HTML::Pipeline::MarkdownFilter,
 HTML::Pipeline::SanitizationFilter,
 ...
 HTML::Pipeline::Twitter::EmojiFilter
], { gfm: true, **options }

That's bascially all about integrating Twemoji in Rails.