diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index 88fb9aec82..d9b8f20ce3 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -5,14 +5,26 @@ const FileAttachmentList = require('./file_attachment_list.jsx');
const UserStore = require('../stores/user_store.jsx');
const Utils = require('../utils/utils.jsx');
const Constants = require('../utils/constants.jsx');
+const twemoji = require('twemoji');
export default class PostBody extends React.Component {
constructor(props) {
super(props);
+ this.parseEmojis = this.parseEmojis.bind(this);
+
const linkData = Utils.extractLinks(this.props.post.message);
this.state = {links: linkData.links, message: linkData.text};
}
+ parseEmojis() {
+ twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+ }
+ componentDidMount() {
+ this.parseEmojis();
+ }
+ componentDidUpdate() {
+ this.parseEmojis();
+ }
componentWillReceiveProps(nextProps) {
const linkData = Utils.extractLinks(nextProps.post.message);
this.setState({links: linkData.links, message: linkData.text});
diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx
index e74ab7f138..997a2b0826 100644
--- a/web/react/components/rhs_comment.jsx
+++ b/web/react/components/rhs_comment.jsx
@@ -12,12 +12,14 @@ var FileAttachmentList = require('./file_attachment_list.jsx');
var Client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var ActionTypes = Constants.ActionTypes;
+var twemoji = require('twemoji');
export default class RhsComment extends React.Component {
constructor(props) {
super(props);
this.retryComment = this.retryComment.bind(this);
+ this.parseEmojis = this.parseEmojis.bind(this);
this.state = {};
}
@@ -51,6 +53,12 @@ export default class RhsComment extends React.Component {
PostStore.updatePendingPost(post);
this.forceUpdate();
}
+ parseEmojis() {
+ twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+ }
+ componentDidMount() {
+ this.parseEmojis();
+ }
shouldComponentUpdate(nextProps) {
if (!Utils.areStatesEqual(nextProps.post, this.props.post)) {
return true;
@@ -58,6 +66,9 @@ export default class RhsComment extends React.Component {
return false;
}
+ componentDidUpdate() {
+ this.parseEmojis();
+ }
render() {
var post = this.props.post;
diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx
index a407e6470d..7c176cedfb 100644
--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -6,12 +6,23 @@ var UserProfile = require('./user_profile.jsx');
var UserStore = require('../stores/user_store.jsx');
var utils = require('../utils/utils.jsx');
var FileAttachmentList = require('./file_attachment_list.jsx');
+var twemoji = require('twemoji');
+var Constants = require('../utils/constants.jsx');
export default class RhsRootPost extends React.Component {
constructor(props) {
super(props);
+
+ this.parseEmojis = this.parseEmojis.bind(this);
+
this.state = {};
}
+ parseEmojis() {
+ twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+ }
+ componentDidMount() {
+ this.parseEmojis();
+ }
shouldComponentUpdate(nextProps) {
if (!utils.areStatesEqual(nextProps.post, this.props.post)) {
return true;
@@ -19,6 +30,9 @@ export default class RhsRootPost extends React.Component {
return false;
}
+ componentDidUpdate() {
+ this.parseEmojis();
+ }
render() {
var post = this.props.post;
var message = utils.textToJsx(post.message);
diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx
index d99177bda2..a28785372e 100644
--- a/web/react/components/rhs_thread.jsx
+++ b/web/react/components/rhs_thread.jsx
@@ -18,7 +18,6 @@ export default class RhsThread extends React.Component {
this.onChange = this.onChange.bind(this);
this.onChangeAll = this.onChangeAll.bind(this);
- this.onTimeChange = this.onTimeChange.bind(this);
this.state = this.getStateFromStores();
}
@@ -44,7 +43,6 @@ export default class RhsThread extends React.Component {
componentDidMount() {
PostStore.addSelectedPostChangeListener(this.onChange);
PostStore.addChangeListener(this.onChangeAll);
- UserStore.addStatusesChangeListener(this.onTimeChange);
this.resize();
$(window).resize(function resize() {
this.resize();
@@ -58,7 +56,6 @@ export default class RhsThread extends React.Component {
componentWillUnmount() {
PostStore.removeSelectedPostChangeListener(this.onChange);
PostStore.removeChangeListener(this.onChangeAll);
- UserStore.removeStatusesChangeListener(this.onTimeChange);
}
onChange() {
var newState = this.getStateFromStores();
@@ -96,14 +93,6 @@ export default class RhsThread extends React.Component {
this.setState(newState);
}
}
- onTimeChange() {
- for (var id in this.state.postList.posts) {
- if (!this.refs[id]) {
- continue;
- }
- this.refs[id].forceUpdate();
- }
- }
resize() {
var height = $(window).height() - $('#error_bar').outerHeight() - 100;
$('.post-right__scroll').css('height', height + 'px');
diff --git a/web/react/package.json b/web/react/package.json
index 5c33e21868..0aa966f09c 100644
--- a/web/react/package.json
+++ b/web/react/package.json
@@ -8,7 +8,8 @@
"keymirror": "^0.1.1",
"object-assign": "^3.0.0",
"react": "^0.13.3",
- "react-zeroclipboard-mixin": "^0.1.0"
+ "react-zeroclipboard-mixin": "^0.1.0",
+ "twemoji": "^1.4.1"
},
"devDependencies": {
"browserify": "^11.0.1",
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 3a6ca1b891..18b7ff59c8 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -103,6 +103,7 @@ module.exports = {
MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
MAX_DMS: 20,
MAX_POST_LEN: 4000,
+ EMOJI_SIZE: 16,
ONLINE_ICON_SVG: "",
OFFLINE_ICON_SVG: "",
MENU_ICON: "",