Merge branches 'develop' and 't3chguy/clean_up_TextualBody' of github.com:matrix-org/matrix-react-sdk into t3chguy/clean_up_TextualBody

 Conflicts:

	yarn.lock

src/components/views/dialogs/DMInviteDialog.js

@@ -23,23 +23,48 @@ import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import {RoomMember} from "matrix-js-sdk/lib/matrix";
 import * as humanize from "humanize";
+import SdkConfig from "../../../SdkConfig";
+import {getHttpUriForMxc} from "matrix-js-sdk/lib/content-repo";
 
 // TODO: [TravisR] Make this generic for all kinds of invites
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
+class DirectoryMember {
+    _userId: string;
+    _displayName: string;
+    _avatarUrl: string;
+
+    constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
+        this._userId = userDirResult.user_id;
+        this._displayName = userDirResult.display_name;
+        this._avatarUrl = userDirResult.avatar_url;
+    }
+
+    // These next members are to implement the contract expected by DMRoomTile
+    get name(): string {
+        return this._displayName || this._userId;
+    }
+
+    get userId(): string {
+        return this._userId;
+    }
+
+    getMxcAvatarUrl(): string {
+        return this._avatarUrl;
+    }
+}
+
 class DMRoomTile extends React.PureComponent {
     static propTypes = {
+        // Has properties to match RoomMember: userId (str), name (str), getMxcAvatarUrl(): string
         member: PropTypes.object.isRequired,
         lastActiveTs: PropTypes.number,
         onToggle: PropTypes.func.isRequired,
+        highlightWord: PropTypes.string,
     };
 
-    constructor() {
-        super();
-    }
-
     _onClick = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
@@ -48,8 +73,44 @@ class DMRoomTile extends React.PureComponent {
         this.props.onToggle(this.props.member.userId);
     };
 
+    _highlightName(str: string) {
+        if (!this.props.highlightWord) return str;
+
+        // We convert things to lowercase for index searching, but pull substrings from
+        // the submitted text to preserve case. Note: we don't need to htmlEntities the
+        // string because React will safely encode the text for us.
+        const lowerStr = str.toLowerCase();
+        const filterStr = this.props.highlightWord.toLowerCase();
+
+        const result = [];
+
+        let i = 0;
+        let ii;
+        while ((ii = lowerStr.indexOf(filterStr, i)) >= 0) {
+            // Push any text we missed (first bit/middle of text)
+            if (ii > i) {
+                // Push any text we aren't highlighting (middle of text match, or beginning of text)
+                result.push(<span key={i + 'begin'}>{str.substring(i, ii)}</span>);
+            }
+
+            i = ii; // copy over ii only if we have a match (to preserve i for end-of-text matching)
+
+            // Highlight the word the user entered
+            const substr = str.substring(i, filterStr.length + i);
+            result.push(<span className='mx_DMInviteDialog_roomTile_highlight' key={i + 'bold'}>{substr}</span>);
+            i += substr.length;
+        }
+
+        // Push any text we missed (end of text)
+        if (i < (str.length - 1)) {
+            result.push(<span key={i + 'end'}>{str.substring(i)}</span>);
+        }
+
+        return result;
+    }
+
     render() {
-        const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
         let timestamp = null;
         if (this.props.lastActiveTs) {
@@ -59,11 +120,22 @@ class DMRoomTile extends React.PureComponent {
             timestamp = <span className='mx_DMInviteDialog_roomTile_time'>{humanTs}</span>;
         }
 
+        const avatarSize = 36;
+        const avatarUrl = getHttpUriForMxc(
+            MatrixClientPeg.get().getHomeserverUrl(), this.props.member.getMxcAvatarUrl(),
+            avatarSize, avatarSize, "crop");
+
         return (
             <div className='mx_DMInviteDialog_roomTile' onClick={this._onClick}>
-                <MemberAvatar member={this.props.member} width={36} height={36} />
-                <span className='mx_DMInviteDialog_roomTile_name'>{this.props.member.name}</span>
-                <span className='mx_DMInviteDialog_roomTile_userId'>{this.props.member.userId}</span>
+                <BaseAvatar
+                    url={avatarUrl}
+                    name={this.props.member.name}
+                    idName={this.props.member.userId}
+                    width={avatarSize}
+                    height={avatarSize}
+                />
+                <span className='mx_DMInviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
+                <span className='mx_DMInviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
                 {timestamp}
             </div>
         );
@@ -76,6 +148,8 @@ export default class DMInviteDialog extends React.PureComponent {
         onFinished: PropTypes.func.isRequired,
     };
 
+    _debounceTimer: number = null;
+
     constructor() {
         super();
 
@@ -84,6 +158,9 @@ export default class DMInviteDialog extends React.PureComponent {
             filterText: "",
             recents: this._buildRecents(),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
+            suggestions: this._buildSuggestions(),
+            numSuggestionsShown: INITIAL_ROOMS_SHOWN,
+            serverResultsMixin: [], // { user: DirectoryMember, userId: string }[], like recents and suggestions
         };
     }
 
@@ -109,6 +186,64 @@ export default class DMInviteDialog extends React.PureComponent {
         return recents;
     }
 
+    _buildSuggestions(): {userId: string, user: RoomMember} {
+        const maxConsideredMembers = 200;
+        const client = MatrixClientPeg.get();
+        const excludedUserIds = [client.getUserId(), SdkConfig.get()['welcomeUserId']];
+        const joinedRooms = client.getRooms()
+            .filter(r => r.getMyMembership() === 'join')
+            .filter(r => r.getJoinedMemberCount() <= maxConsideredMembers);
+
+        // Generates { userId: {member, rooms[]} }
+        const memberRooms = joinedRooms.reduce((members, room) => {
+            const joinedMembers = room.getJoinedMembers().filter(u => !excludedUserIds.includes(u.userId));
+            for (const member of joinedMembers) {
+                if (!members[member.userId]) {
+                    members[member.userId] = {
+                        member: member,
+                        // Track the room size of the 'picked' member so we can use the profile of
+                        // the smallest room (likely a DM).
+                        pickedMemberRoomSize: room.getJoinedMemberCount(),
+                        rooms: [],
+                    };
+                }
+
+                members[member.userId].rooms.push(room);
+
+                if (room.getJoinedMemberCount() < members[member.userId].pickedMemberRoomSize) {
+                    members[member.userId].member = member;
+                    members[member.userId].pickedMemberRoomSize = room.getJoinedMemberCount();
+                }
+            }
+            return members;
+        }, {});
+
+        // Generates { userId: {member, numRooms, score} }
+        const memberScores = Object.values(memberRooms).reduce((scores, entry) => {
+            const numMembersTotal = entry.rooms.reduce((c, r) => c + r.getJoinedMemberCount(), 0);
+            const maxRange = maxConsideredMembers * entry.rooms.length;
+            scores[entry.member.userId] = {
+                member: entry.member,
+                numRooms: entry.rooms.length,
+                score: Math.max(0, Math.pow(1 - (numMembersTotal / maxRange), 5)),
+            };
+            return scores;
+        }, {});
+
+        const members = Object.values(memberScores);
+        members.sort((a, b) => {
+            if (a.score === b.score) {
+                if (a.numRooms === b.numRooms) {
+                    return a.member.userId.localeCompare(b.member.userId);
+                }
+
+                return b.numRooms - a.numRooms;
+            }
+            return b.score - a.score;
+        });
+        return members.map(m => ({userId: m.member.userId, user: m.member}));
+    }
+
     _startDm = () => {
         this.props.onFinished(this.state.targets);
     };
@@ -118,13 +253,45 @@ export default class DMInviteDialog extends React.PureComponent {
     };
 
     _updateFilter = (e) => {
-        this.setState({filterText: e.target.value});
+        const term = e.target.value;
+        this.setState({filterText: term});
+
+        // Debounce server lookups to reduce spam. We don't clear the existing server
+        // results because they might still be vaguely accurate, likewise for races which
+        // could happen here.
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+        }
+        this._debounceTimer = setTimeout(() => {
+            MatrixClientPeg.get().searchUserDirectory({term}).then(r => {
+                if (term !== this.state.filterText) {
+                    // Discard the results - we were probably too slow on the server-side to make
+                    // these results useful. This is a race we want to avoid because we could overwrite
+                    // more accurate results.
+                    return;
+                }
+                this.setState({
+                    serverResultsMixin: r.results.map(u => ({
+                        userId: u.user_id,
+                        user: new DirectoryMember(u),
+                    })),
+                });
+            }).catch(e => {
+                console.error("Error searching user directory:");
+                console.error(e);
+                this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
+            });
+        }, 150); // 150ms debounce (human reaction time + some)
     };
 
     _showMoreRecents = () => {
         this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
     };
 
+    _showMoreSuggestions = () => {
+        this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
+    };
+
     _toggleMember = (userId) => {
         const targets = this.state.targets.map(t => t); // cheap clone for mutation
         const idx = targets.indexOf(userId);
@@ -133,29 +300,71 @@ export default class DMInviteDialog extends React.PureComponent {
         this.setState({targets});
     };
 
-    _renderRecents() {
-        if (!this.state.recents || this.state.recents.length === 0) return null;
+    _renderSection(kind: "recents"|"suggestions") {
+        let sourceMembers = kind === 'recents' ? this.state.recents : this.state.suggestions;
+        let showNum = kind === 'recents' ? this.state.numRecentsShown : this.state.numSuggestionsShown;
+        const showMoreFn = kind === 'recents' ? this._showMoreRecents.bind(this) : this._showMoreSuggestions.bind(this);
+        const lastActive = (m) => kind === 'recents' ? m.lastActive : null;
+        const sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions");
+
+        // Mix in the server results if we have any, but only if we're searching
+        if (this.state.filterText && this.state.serverResultsMixin && kind === 'suggestions') {
+            // only pick out the server results that aren't already covered though
+            const uniqueServerResults = this.state.serverResultsMixin
+                .filter(u => !sourceMembers.some(m => m.userId === u.userId));
+
+            sourceMembers = sourceMembers.concat(uniqueServerResults);
+        }
+
+        // Hide the section if there's nothing to filter by
+        if (!sourceMembers || sourceMembers.length === 0) return null;
+
+        // Do some simple filtering on the input before going much further. If we get no results, say so.
+        if (this.state.filterText) {
+            const filterBy = this.state.filterText.toLowerCase();
+            sourceMembers = sourceMembers
+                .filter(m => m.user.name.toLowerCase().includes(filterBy) || m.userId.toLowerCase().includes(filterBy));
+
+            if (sourceMembers.length === 0) {
+                return (
+                    <div className='mx_DMInviteDialog_section'>
+                        <h3>{sectionName}</h3>
+                        <p>{_t("No results")}</p>
+                    </div>
+                );
+            }
+        }
+
+        // If we're going to hide one member behind 'show more', just use up the space of the button
+        // with the member's tile instead.
+        if (showNum === sourceMembers.length - 1) showNum++;
 
         // .slice() will return an incomplete array but won't error on us if we go too far
-        const toRender = this.state.recents.slice(0, this.state.numRecentsShown);
-        const hasMore = toRender.length < this.state.recents.length;
+        const toRender = sourceMembers.slice(0, showNum);
+        const hasMore = toRender.length < sourceMembers.length;
 
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         let showMore = null;
         if (hasMore) {
             showMore = (
-                <AccessibleButton onClick={this._showMoreRecents} kind="link">
+                <AccessibleButton onClick={showMoreFn} kind="link">
                     {_t("Show more")}
                 </AccessibleButton>
             );
         }
 
         const tiles = toRender.map(r => (
-            <DMRoomTile member={r.user} lastActiveTs={r.lastActive} key={r.userId} onToggle={this._toggleMember} />
+            <DMRoomTile
+                member={r.user}
+                lastActiveTs={lastActive(r)}
+                key={r.userId}
+                onToggle={this._toggleMember}
+                highlightWord={this.state.filterText}
+            />
         ));
         return (
             <div className='mx_DMInviteDialog_section'>
-                <h3>{_t("Recent Conversations")}</h3>
+                <h3>{sectionName}</h3>
                 {tiles}
                 {showMore}
             </div>
@@ -175,7 +384,6 @@ export default class DMInviteDialog extends React.PureComponent {
                     id="inviteTargets"
                     value={this.state.filterText}
                     onChange={this._updateFilter}
-                    placeholder="TODO: Implement filtering/searching (vector-im/riot-web#11199)"
                 />
             </div>
         );
@@ -209,7 +417,8 @@ export default class DMInviteDialog extends React.PureComponent {
                             {_t("Go")}
                         </AccessibleButton>
                     </div>
-                    {this._renderRecents()}
+                    {this._renderSection('recents')}
+                    {this._renderSection('suggestions')}
                 </div>
             </BaseDialog>
         );

src/components/views/elements/LazyRenderList.js

@@ -56,14 +56,20 @@ class ItemRange {
 }
 
 export default class LazyRenderList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
     static getDerivedStateFromProps(props, state) {
         const range = LazyRenderList.getVisibleRangeFromProps(props);
         const intersectRange = range.expand(props.overflowMargin);
         const renderRange = range.expand(props.overflowItems);
-        const listHasChangedSize = !!state && renderRange.totalSize() !== state.renderRange.totalSize();
+        const listHasChangedSize = !!state.renderRange && renderRange.totalSize() !== state.renderRange.totalSize();
         // only update render Range if the list has shrunk/grown and we need to adjust padding OR
         // if the new range + overflowMargin isn't contained by the old anymore
-        if (listHasChangedSize || !state || !state.renderRange.contains(intersectRange)) {
+        if (listHasChangedSize || !state.renderRange || !state.renderRange.contains(intersectRange)) {
             return {renderRange};
         }
         return null;

src/components/views/elements/TagTile.js

@@ -55,6 +55,8 @@ export default createReactClass({
             hover: false,
             // The profile data of the group if this.props.tag is a group ID
             profile: null,
+            // Whether or not the context menu is open
+            menuDisplayed: false,
         };
     },
 

src/components/views/emojipicker/EmojiPicker.js

@@ -47,10 +47,8 @@ class EmojiPicker extends React.Component {
             viewportHeight: 280,
         };
 
-        // Convert recent emoji characters to emoji data, removing unknowns.
-        this.recentlyUsed = recent.get()
-            .map(unicode => getEmojiFromUnicode(unicode))
-            .filter(data => !!data);
+        // Convert recent emoji characters to emoji data, removing unknowns and duplicates
+        this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean)));
         this.memoizedDataByCategory = {
             recent: this.recentlyUsed,
             ...DATA_BY_CATEGORY,

src/components/views/groups/GroupPublicityToggle.js

@@ -32,7 +32,7 @@ export default createReactClass({
         return {
             busy: false,
             ready: false,
-            isGroupPublicised: null,
+            isGroupPublicised: false, // assume false as <ToggleSwitch /> expects a boolean
         };
     },
 
@@ -43,7 +43,7 @@ export default createReactClass({
     _initGroupStore: function(groupId) {
         this._groupStoreToken = GroupStore.registerListener(groupId, () => {
             this.setState({
-                isGroupPublicised: GroupStore.getGroupPublicity(groupId),
+                isGroupPublicised: Boolean(GroupStore.getGroupPublicity(groupId)),
                 ready: GroupStore.isStateReady(groupId, GroupStore.STATE_KEY.Summary),
             });
         });

src/components/views/right_panel/UserInfo.js

@@ -1000,8 +1000,8 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
     // Load room if we are given a room id and memoize it
     const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
-    // fetch latest room member if we have a room, so we don't show historical information
-    const member = useMemo(() => room ? room.getMember(user.userId) : user, [room, user]);
+    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
+    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
 
     // only display the devices list if our client supports E2E
     const _enableDevices = cli.isCryptoEnabled();

src/components/views/room_settings/AliasSettings.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import EditableItemList from "../elements/EditableItemList";
 
-const React = require('react');
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
@@ -28,22 +28,41 @@ import AccessibleButton from "../elements/AccessibleButton";
 const Modal = require("../../../Modal");
 
 class EditableAliasesList extends EditableItemList {
+    constructor(props) {
+        super(props);
+
+        this._aliasField = createRef();
+    }
+
+    _onAliasAdded = async () => {
+        await this._aliasField.current.validate({ allowEmpty: false });
+
+        if (this._aliasField.current.isValid) {
+            if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
+            return;
+        }
+
+        this._aliasField.current.focus();
+        this._aliasField.current.validate({ allowEmpty: false, focused: true });
+    };
+
     _renderNewItemField() {
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
         const onChange = (alias) => this._onNewItemChanged({target: {value: alias}});
         return (
             <form
-                onSubmit={this._onItemAdded}
+                onSubmit={this._onAliasAdded}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_EditableItemList_newItem"
             >
                 <RoomAliasField
                     id={`mx_EditableItemList_new_${this.props.id}`}
+                    ref={this._aliasField}
                     onChange={onChange}
                     value={this.props.newItem || ""}
                     domain={this.props.domain} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary">
+                <AccessibleButton onClick={this._onAliasAdded} kind="primary">
                     { _t("Add") }
                 </AccessibleButton>
             </form>
@@ -99,11 +118,6 @@ export default class AliasSettings extends React.Component {
         return dict;
     }
 
-    isAliasValid(alias) {
-        // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
-        return (alias.match(/^#([^/:,]+?):(.+)$/) && encodeURI(alias) === alias);
-    }
-
     changeCanonicalAlias(alias) {
         if (!this.props.canSetCanonicalAlias) return;
 
@@ -139,38 +153,31 @@ export default class AliasSettings extends React.Component {
 
         const localDomain = MatrixClientPeg.get().getDomain();
         if (!alias.includes(':')) alias += ':' + localDomain;
-        if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
-            MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
-                const localAliases = this.state.domainToAliases[localDomain] || [];
-                const domainAliases = Object.assign({}, this.state.domainToAliases);
-                domainAliases[localDomain] = [...localAliases, alias];
 
-                this.setState({
-                    domainToAliases: domainAliases,
-                    // Reset the add field
-                    newAlias: "",
-                });
+        MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
+            const localAliases = this.state.domainToAliases[localDomain] || [];
+            const domainAliases = Object.assign({}, this.state.domainToAliases);
+            domainAliases[localDomain] = [...localAliases, alias];
 
-                if (!this.state.canonicalAlias) {
-                    this.changeCanonicalAlias(alias);
-                }
-            }).catch((err) => {
-                console.error(err);
-                Modal.createTrackedDialog('Error creating alias', '', ErrorDialog, {
-                    title: _t("Error creating alias"),
-                    description: _t(
-                        "There was an error creating that alias. It may not be allowed by the server " +
-                        "or a temporary failure occurred.",
-                    ),
-                });
+            this.setState({
+                domainToAliases: domainAliases,
+                // Reset the add field
+                newAlias: "",
             });
-        } else {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Invalid alias format', '', ErrorDialog, {
-                title: _t('Invalid alias format'),
-                description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
+
+            if (!this.state.canonicalAlias) {
+                this.changeCanonicalAlias(alias);
+            }
+        }).catch((err) => {
+            console.error(err);
+            Modal.createTrackedDialog('Error creating alias', '', ErrorDialog, {
+                title: _t("Error creating alias"),
+                description: _t(
+                    "There was an error creating that alias. It may not be allowed by the server " +
+                    "or a temporary failure occurred.",
+                ),
             });
-        }
+        });
     };
 
     onLocalAliasDeleted = (index) => {

src/components/views/room_settings/RoomProfileSettings.js

@@ -98,6 +98,8 @@ export default class RoomProfileSettings extends React.Component {
             newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
             newState.originalAvatarUrl = newState.avatarUrl;
             newState.avatarFile = null;
+        } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
+            await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {url: undefined}, '');
         }
 
         if (this.state.originalTopic !== this.state.topic) {

src/components/views/rooms/LinkPreviewWidget.js

@@ -18,7 +18,8 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import { linkifyElement } from '../../../HtmlUtils';
+import { AllHtmlEntities } from 'html-entities';
+import {linkifyElement} from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 
@@ -127,6 +128,10 @@ module.exports = createReactClass({
                   </div>;
         }
 
+        // The description includes &-encoded HTML entities, we decode those as React treats the thing as an
+        // opaque string. This does not allow any HTML to be injected into the DOM.
+        const description = AllHtmlEntities.decode(p["og:description"] || "");
+
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_LinkPreviewWidget" >
@@ -135,7 +140,7 @@ module.exports = createReactClass({
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
                     <div className="mx_LinkPreviewWidget_description" ref={this._description}>
-                        { p["og:description"] }
+                        { description }
                     </div>
                 </div>
                 <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>

src/components/views/settings/ProfileSettings.js

@@ -88,6 +88,8 @@ export default class ProfileSettings extends React.Component {
             newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
             newState.originalAvatarUrl = newState.avatarUrl;
             newState.avatarFile = null;
+        } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
+            await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
         }
 
         this.setState(newState);

src/emoji.js

@@ -16,14 +16,12 @@ limitations under the License.
 
 import EMOJIBASE from 'emojibase-data/en/compact.json';
 
-export const VARIATION_SELECTOR = String.fromCharCode(0xFE0F);
-
 // The unicode is stored without the variant selector
 const UNICODE_TO_EMOJI = new Map(); // not exported as gets for it are handled by getEmojiFromUnicode
 export const EMOTICON_TO_EMOJI = new Map();
 export const SHORTCODE_TO_EMOJI = new Map();
 
-export const getEmojiFromUnicode = unicode => UNICODE_TO_EMOJI.get(unicode.replace(VARIATION_SELECTOR, ""));
+export const getEmojiFromUnicode = unicode => UNICODE_TO_EMOJI.get(stripVariation(unicode));
 
 const EMOJIBASE_GROUP_ID_TO_CATEGORY = [
     "people", // smileys
@@ -51,13 +49,6 @@ export const DATA_BY_CATEGORY = {
 
 // Store various mappings from unicode/emoticon/shortcode to the Emoji objects
 EMOJIBASE.forEach(emoji => {
-    if (emoji.unicode.includes(VARIATION_SELECTOR)) {
-        // Clone data into variation-less version
-        emoji = Object.assign({}, emoji, {
-            unicode: emoji.unicode.replace(VARIATION_SELECTOR, ""),
-        });
-    }
-
     const categoryId = EMOJIBASE_GROUP_ID_TO_CATEGORY[emoji.group];
     if (DATA_BY_CATEGORY.hasOwnProperty(categoryId)) {
         DATA_BY_CATEGORY[categoryId].push(emoji);
@@ -66,7 +57,13 @@ EMOJIBASE.forEach(emoji => {
     emoji.filterString = `${emoji.annotation}\n${emoji.shortcodes.join('\n')}}\n${emoji.emoticon || ''}`.toLowerCase();
 
     // Add mapping from unicode to Emoji object
-    UNICODE_TO_EMOJI.set(emoji.unicode, emoji);
+    // The 'unicode' field that we use in emojibase has either
+    // VS15 or VS16 appended to any characters that can take
+    // variation selectors. Which one it appends depends
+    // on whether emojibase considers their type to be 'text' or
+    // 'emoji'. We therefore strip any variation chars from strings
+    // both when building the map and when looking up.
+    UNICODE_TO_EMOJI.set(stripVariation(emoji.unicode), emoji);
 
     if (emoji.emoticon) {
         // Add mapping from emoticon to Emoji object
@@ -80,3 +77,15 @@ EMOJIBASE.forEach(emoji => {
         });
     }
 });
+
+/**
+ * Strips variation selectors from a string
+ * NB. Skin tone modifers are not variation selectors:
+ * this function does not touch them. (Should it?)
+ *
+ * @param {string} str string to strip
+ * @returns {string} stripped string
+ */
+function stripVariation(str) {
+    return str.replace(/[\uFE00-\uFE0F]/, "");
+}

src/i18n/strings/en_EN.json

@@ -1074,8 +1074,6 @@
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
     "Error creating alias": "Error creating alias",
     "There was an error creating that alias. It may not be allowed by the server or a temporary failure occurred.": "There was an error creating that alias. It may not be allowed by the server or a temporary failure occurred.",
-    "Invalid alias format": "Invalid alias format",
-    "'%(alias)s' is not a valid format for an alias": "'%(alias)s' is not a valid format for an alias",
     "Error removing alias": "Error removing alias",
     "There was an error removing that alias. It may no longer exist or a temporary error occurred.": "There was an error removing that alias. It may no longer exist or a temporary error occurred.",
     "Main address": "Main address",
@@ -1424,8 +1422,9 @@
     "View Servers in Room": "View Servers in Room",
     "Toolbox": "Toolbox",
     "Developer Tools": "Developer Tools",
-    "Show more": "Show more",
     "Recent Conversations": "Recent Conversations",
+    "Suggestions": "Suggestions",
+    "Show more": "Show more",
     "Direct Messages": "Direct Messages",
     "If you can't find someone, ask them for their username, or share your username (%(userId)s) or <a>profile link</a>.": "If you can't find someone, ask them for their username, or share your username (%(userId)s) or <a>profile link</a>.",
     "Go": "Go",