Adding Emoji One

app/assets/javascripts/components/components/status_content.jsx

@@ -1,5 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import emojione from 'emojione';
+
+emojione.imageType = 'png';
+emojione.sprites = false;
+emojione.imagePathPNG = '/emoji/';
 
 const StatusContent = React.createClass({
 
@@ -55,7 +60,7 @@ const StatusContent = React.createClass({
   },
 
   render () {
-    const content = { __html: this.props.status.get('content') };
+    const content = { __html: emojione.unicodeToImage(this.props.status.get('content')) };
     return <div className='status__content' dangerouslySetInnerHTML={content} />;
   },
 

app/assets/stylesheets/components.scss

@@ -71,6 +71,17 @@
   }
 }
 
+.emojione {
+  display: inline-block;
+  font-size: inherit;
+  vertical-align: middle;
+  margin: -.2ex .15em .2ex;
+
+  img {
+    width: auto;
+  }
+}
+
 .status__content, .reply-indicator__content {
   font-size: 15px;
   line-height: 20px;
@@ -78,6 +89,11 @@
   font-weight: 300;
   overflow: hidden;
 
+  .emojione {
+    width: 18px;
+    height: 18px;
+  }
+
   p {
     margin-bottom: 20px;
 
@@ -110,6 +126,11 @@
   .status__content {
     font-size: 19px;
     line-height: 24px;
+
+    .emojione {
+      width: 22px;
+      height: 22px;
+    }
   }
 }
 

config/initializers/assets.rb

@@ -4,7 +4,7 @@
 Rails.application.config.assets.version = '1.0'
 
 # Add additional assets to the asset load path
-# Rails.application.config.assets.paths << Emoji.images_path
+# Rails.application.config.assets.paths << 'node_modules'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.

package.json

@@ -41,6 +41,7 @@
     "sinon": "^1.17.6"
   },
   "dependencies": {
+    "emojione": "^2.2.6",
     "react-autosuggest": "^7.0.1",
     "react-responsive": "^1.1.5",
     "react-router-scroll": "^0.3.2"