diff --git a/package-lock.json b/package-lock.json index dd3e9eee3e8c1ecb9c60af58ccdd7a354aa16843..ea7c58c688b9fefec8576009ccd24b8e86da7589 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10548,6 +10548,11 @@ "prop-types": "^15.6.0" } }, + "react-emojione": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-emojione/-/react-emojione-5.0.0.tgz", + "integrity": "sha512-+OsHCKgcGdtQVGBYWWFPO7JhS2cevX2S6L3/pR0sah4hJGBM7qU0d2m64p9NYpwu6awH8t+yKArhNc/WHSb8Lg==" + }, "react-file-reader-input": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/react-file-reader-input/-/react-file-reader-input-1.1.4.tgz", diff --git a/package.json b/package.json index 9b8feb76ed34c64f80c78326acfac6b6575449d3..cea7db2dab0523a588bcd266c059fca8780d8f95 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "raven-js": "^3.20.1", "react": "^16.1.1", "react-dom": "^16.1.1", + "react-emojione": "^5.0.0", "react-intl": "^2.4.0", "react-linkify": "^0.2.2", "screenfull": "^3.3.2", diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js index 963371fa4c3660e0fce2c461f6a26d2f48c95676..252bf77faeb441dcb6179bbf0400f91f0707fb8c 100644 --- a/src/react-components/presence-log.js +++ b/src/react-components/presence-log.js @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; import styles from "../assets/stylesheets/presence-log.scss"; import classNames from "classnames"; import Linkify from "react-linkify"; +import { emojify } from "react-emojione"; import { FormattedMessage } from "react-intl"; export default class PresenceLog extends Component { @@ -44,7 +45,12 @@ export default class PresenceLog extends Component { case "message": return ( <div key={e.key} className={classNames(entryClasses)}> - <b>{e.name}</b>: <Linkify properties={{ target: "_blank", rel: "noopener referrer" }}>{e.body}</Linkify> + <b>{e.name}</b>:{" "} + <Linkify properties={{ target: "_blank", rel: "noopener referrer" }}> + {emojify(e.body, { + style: { textIndent: "auto", height: "20px", width: "20px", fontSize: "1.25em", margin: "0" } + })} + </Linkify> </div> ); }