Feature use twemoji (ruby-china#677)

* Twemoji 3.0, fix markdown parse.
* Sort emojis in complete list.
* Add 💩 to markdown example
* CDN emoji image files.
* Add favorite emoji.
* Add Emoji pickup window.
* Improve emoji modal render performance.
* Emoji image withou zoom.
* Save most used emojis.

Author: huacnlee

Gemfile

@@ -22,7 +22,7 @@ gem 'rack-attack'
 gem 'rails-i18n', '5.0.0.beta3'
 gem 'http_accept_language'
 gem 'rails_autolink'
-gem 'md_emoji'
+gem 'twemoji'
 gem 'jquery-atwho-rails'
 
 # OAuth Provider

Gemfile.lock

@@ -203,9 +203,6 @@ GEM
       nokogiri (>= 1.5.9)
     mail (2.6.4)
       mime-types (>= 1.16, < 4)
-    md_emoji (1.0.2)
-      railties (>= 3.1.0)
-      redcarpet (>= 2.0)
     memory_profiler (0.9.6)
     method_source (0.8.2)
     mime-types (3.1)
@@ -408,6 +405,8 @@ GEM
     tool (0.2.3)
     turbolinks (2.5.3)
       coffee-rails
+    twemoji (3.0.0)
+      nokogiri (~> 1.6.2)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.0)
@@ -463,7 +462,6 @@ DEPENDENCIES
   kgio
   letter_avatar
   letter_opener
-  md_emoji
   mini_magick
   nokogiri (>= 1.6.8)
   notifications
@@ -505,6 +503,7 @@ DEPENDENCIES
   sprockets
   status-page
   turbolinks (~> 2.5.3)
+  twemoji
   uglifier
   will_paginate
 

README.md

@@ -84,12 +84,6 @@ $ rails s
 bundle exec rake
 ```
 
-## About Emoji Asset files
-
-You may see emoji files 404 not found, after you publish you app. Because the emoji not include into Assets Pipline, what reason you can read Issue #522.
-
-You need upload emoji images into `/assets/emojis` production environment path / CDN path, you can find image here: [md_emoji](https://github.com/elm-city-craftworks/md_emoji/tree/master/vendor/assets/images/emojis)
-
 ## Contributors
 
 * [Contributors](https://github.com/ruby-china/ruby-china/contributors)

app/assets/javascripts/app.coffee

@@ -14,7 +14,8 @@
 #= require jquery.fluidbox.min
 #= require social-share-button
 #= require jquery.atwho
-#= require emoji_list
+#= require emoji-data
+#= require emoji-modal
 #= require notifier
 #= require action_cable
 #= require form_storage
@@ -248,6 +249,7 @@ window.App =
   current_user_id: null
   access_token : ''
   asset_url : ''
+  twemoji_url: 'https://twemoji.maxcdn.com/'
   root_url : ''
   cable: ActionCable.createConsumer()
 
@@ -302,9 +304,10 @@ window.App =
       insertTpl : "@${login}"
     .atwho
       at : ":"
+      searchKey: 'code'
       data : window.EMOJI_LIST
-      displayTpl : "<li data-value='${name}:'><img src='#{App.asset_url}/assets/emojis/${name}.png' height='20' width='20'/> ${name} </li>"
-      insertTpl: ":${name}:"
+      displayTpl : "<li data-value='${code}'><img src='#{App.twemoji_url}/svg/${url}.svg' class='twemoji' /> ${code} </li>"
+      insertTpl: "${code}"
     true
 
 $(document).on 'page:change',  ->