Merge branches 'develop' and 't3chguy/add-missing-autocomplete-commands' of github.com:matrix-org/matrix-react-sdk into t3chguy/add-missing-autocomplete-commands

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

# Conflicts:
#	src/autocomplete/CommandProvider.js
#	src/i18n/strings/en_EN.json

src/autocomplete/AutocompleteProvider.js

@@ -19,7 +19,7 @@ import React from 'react';
 import type {Completion, SelectionRange} from './Autocompleter';
 
 export default class AutocompleteProvider {
-    constructor(commandRegex?: RegExp, fuseOpts?: any) {
+    constructor(commandRegex?: RegExp) {
         if (commandRegex) {
             if (!commandRegex.global) {
                 throw new Error('commandRegex must have global flag set');

src/autocomplete/Autocompleter.js

@@ -59,7 +59,7 @@ export async function getCompletions(query: string, selection: SelectionRange, f
         PROVIDERS.map(provider => {
             return Q(provider.getCompletions(query, selection, force))
                 .timeout(PROVIDER_COMPLETION_TIMEOUT);
-        })
+        }),
     );
 
     return completionsList

src/autocomplete/CommandProvider.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import Fuse from 'fuse.js';
+import FuzzyMatcher from './FuzzyMatcher';
 import {TextualCompletion} from './Components';
 
 // TODO merge this with the factory mechanics of SlashCommands?
@@ -36,13 +36,13 @@ const COMMANDS = [
     },
     {
         command: '/unban',
-        args: '<user-id> [reason]',
+        args: '<user-id>',
         description: 'Unbans user with given id',
     },
     {
         command: '/op',
-        args: '<user-id>',
-        description: 'Ops user with given id',
+        args: '<userId> [<power-level>]',
+        description: 'Define the power level of a user',
     },
     {
         command: '/deop',
@@ -61,8 +61,8 @@ const COMMANDS = [
     },
     {
         command: '/part',
-        args: '<room-alias>',
-        description: 'Leaves room with given alias',
+        args: '[<room-alias>]',
+        description: 'Leave room',
     },
     {
         command: '/topic',
@@ -104,7 +104,7 @@ let instance = null;
 export default class CommandProvider extends AutocompleteProvider {
     constructor() {
         super(COMMAND_RE);
-        this.fuse = new Fuse(COMMANDS, {
+        this.matcher = new FuzzyMatcher(COMMANDS, {
            keys: ['command', 'args', 'description'],
         });
     }
@@ -113,7 +113,7 @@ export default class CommandProvider extends AutocompleteProvider {
         let completions = [];
         const {command, range} = this.getCurrentCommand(query, selection);
         if (command) {
-            completions = this.fuse.search(command[0]).map((result) => {
+            completions = this.matcher.match(command[0]).map((result) => {
                 return {
                     completion: result.command + ' ',
                     component: (<TextualCompletion

src/autocomplete/EmojiProvider.js

@@ -18,21 +18,55 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
-import Fuse from 'fuse.js';
+import {emojioneList, shortnameToImage, shortnameToUnicode, asciiRegexp} from 'emojione';
+import FuzzyMatcher from './FuzzyMatcher';
 import sdk from '../index';
 import {PillCompletion} from './Components';
 import type {SelectionRange, Completion} from './Autocompleter';
 
-const EMOJI_REGEX = /:\w*:?/g;
-const EMOJI_SHORTNAMES = Object.keys(emojioneList);
+import EmojiData from '../stripped-emoji.json';
+
+const LIMIT = 20;
+const CATEGORY_ORDER = [
+    'people',
+    'food',
+    'objects',
+    'activity',
+    'nature',
+    'travel',
+    'flags',
+    'symbols',
+    'unicode9',
+    'modifier',
+];
+
+// Match for ":wink:" or ascii-style ";-)" provided by emojione
+const EMOJI_REGEX = new RegExp('(' + asciiRegexp + '|:\\w*:?)', 'g');
+const EMOJI_SHORTNAMES = Object.keys(EmojiData).map((key) => EmojiData[key]).sort(
+    (a, b) => {
+        if (a.category === b.category) {
+            return a.emoji_order - b.emoji_order;
+        }
+        return CATEGORY_ORDER.indexOf(a.category) - CATEGORY_ORDER.indexOf(b.category);
+    },
+).map((a) => {
+    return {
+        name: a.name,
+        shortname: a.shortname,
+        aliases_ascii: a.aliases_ascii ? a.aliases_ascii.join(' ') : '',
+    };
+});
 
 let instance = null;
 
 export default class EmojiProvider extends AutocompleteProvider {
     constructor() {
         super(EMOJI_REGEX);
-        this.fuse = new Fuse(EMOJI_SHORTNAMES, {});
+        this.matcher = new FuzzyMatcher(EMOJI_SHORTNAMES, {
+            keys: ['aliases_ascii', 'shortname', 'name'],
+            // For matching against ascii equivalents
+            shouldMatchWordsOnly: false,
+        });
     }
 
     async getCompletions(query: string, selection: SelectionRange) {
@@ -41,8 +75,8 @@ export default class EmojiProvider extends AutocompleteProvider {
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection);
         if (command) {
-            completions = this.fuse.search(command[0]).map(result => {
-                const shortname = EMOJI_SHORTNAMES[result];
+            completions = this.matcher.match(command[0]).map(result => {
+                const {shortname} = result;
                 const unicode = shortnameToUnicode(shortname);
                 return {
                     completion: unicode,
@@ -51,7 +85,7 @@ export default class EmojiProvider extends AutocompleteProvider {
                     ),
                     range,
                 };
-            }).slice(0, 8);
+            }).slice(0, LIMIT);
         }
         return completions;
     }

src/autocomplete/FuzzyMatcher.js

@@ -0,0 +1,107 @@
+/*
+Copyright 2017 Aviral Dasgupta
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+//import Levenshtein from 'liblevenshtein';
+//import _at from 'lodash/at';
+//import _flatMap from 'lodash/flatMap';
+//import _sortBy from 'lodash/sortBy';
+//import _sortedUniq from 'lodash/sortedUniq';
+//import _keys from 'lodash/keys';
+//
+//class KeyMap {
+//    keys: Array<String>;
+//    objectMap: {[String]: Array<Object>};
+//    priorityMap: {[String]: number}
+//}
+//
+//const DEFAULT_RESULT_COUNT = 10;
+//const DEFAULT_DISTANCE = 5;
+
+// FIXME Until Fuzzy matching works better, we use prefix matching.
+
+import PrefixMatcher from './QueryMatcher';
+export default PrefixMatcher;
+
+//class FuzzyMatcher { // eslint-disable-line no-unused-vars
+//    /**
+//     * @param {object[]} objects the objects to perform a match on
+//     * @param {string[]} keys an array of keys within each object to match on
+//     * Keys can refer to object properties by name and as in JavaScript (for nested properties)
+//     *
+//     * To use, simply presort objects by required criteria, run through this function and create a FuzzyMatcher with the
+//     * resulting KeyMap.
+//     *
+//     * TODO: Handle arrays and objects (Fuse did this, RoomProvider uses it)
+//     * @return {KeyMap}
+//     */
+//    static valuesToKeyMap(objects: Array<Object>, keys: Array<String>): KeyMap {
+//        const keyMap = new KeyMap();
+//        const map = {};
+//        const priorities = {};
+//
+//        objects.forEach((object, i) => {
+//            const keyValues = _at(object, keys);
+//            console.log(object, keyValues, keys);
+//            for (const keyValue of keyValues) {
+//                if (!map.hasOwnProperty(keyValue)) {
+//                   map[keyValue] = [];
+//                }
+//                map[keyValue].push(object);
+//            }
+//            priorities[object] = i;
+//        });
+//
+//        keyMap.objectMap = map;
+//        keyMap.priorityMap = priorities;
+//        keyMap.keys = _sortBy(_keys(map), [(value) => priorities[value]]);
+//        return keyMap;
+//    }
+//
+//    constructor(objects: Array<Object>, options: {[Object]: Object} = {}) {
+//        this.options = options;
+//        this.keys = options.keys;
+//        this.setObjects(objects);
+//    }
+//
+//    setObjects(objects: Array<Object>) {
+//        this.keyMap = FuzzyMatcher.valuesToKeyMap(objects, this.keys);
+//        console.log(this.keyMap.keys);
+//        this.matcher = new Levenshtein.Builder()
+//            .dictionary(this.keyMap.keys, true)
+//            .algorithm('transposition')
+//            .sort_candidates(false)
+//            .case_insensitive_sort(true)
+//            .include_distance(true)
+//            .maximum_candidates(this.options.resultCount || DEFAULT_RESULT_COUNT) // result count 0 doesn't make much sense
+//            .build();
+//    }
+//
+//    match(query: String): Array<Object> {
+//        const candidates = this.matcher.transduce(query, this.options.distance || DEFAULT_DISTANCE);
+//        // TODO FIXME This is hideous. Clean up when possible.
+//        const val = _sortedUniq(_sortBy(_flatMap(candidates, (candidate) => {
+//                return this.keyMap.objectMap[candidate[0]].map((value) => {
+//                    return {
+//                        distance: candidate[1],
+//                        ...value,
+//                    };
+//                });
+//            }),
+//            [(candidate) => candidate.distance, (candidate) => this.keyMap.priorityMap[candidate]]));
+//        console.log(val);
+//        return val;
+//    }
+//}

src/autocomplete/QueryMatcher.js

@@ -0,0 +1,92 @@
+//@flow
+/*
+Copyright 2017 Aviral Dasgupta
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import _at from 'lodash/at';
+import _flatMap from 'lodash/flatMap';
+import _sortBy from 'lodash/sortBy';
+import _sortedUniq from 'lodash/sortedUniq';
+import _keys from 'lodash/keys';
+
+class KeyMap {
+    keys: Array<String>;
+    objectMap: {[String]: Array<Object>};
+    priorityMap = new Map();
+}
+
+export default class QueryMatcher {
+    /**
+     * @param {object[]} objects the objects to perform a match on
+     * @param {string[]} keys an array of keys within each object to match on
+     * Keys can refer to object properties by name and as in JavaScript (for nested properties)
+     *
+     * To use, simply presort objects by required criteria, run through this function and create a QueryMatcher with the
+     * resulting KeyMap.
+     *
+     * TODO: Handle arrays and objects (Fuse did this, RoomProvider uses it)
+     * @return {KeyMap}
+     */
+    static valuesToKeyMap(objects: Array<Object>, keys: Array<String>): KeyMap {
+        const keyMap = new KeyMap();
+        const map = {};
+
+        objects.forEach((object, i) => {
+            const keyValues = _at(object, keys);
+            for (const keyValue of keyValues) {
+                if (!map.hasOwnProperty(keyValue)) {
+                    map[keyValue] = [];
+                }
+                map[keyValue].push(object);
+            }
+            keyMap.priorityMap.set(object, i);
+        });
+
+        keyMap.objectMap = map;
+        keyMap.keys = _keys(map);
+        return keyMap;
+    }
+
+    constructor(objects: Array<Object>, options: {[Object]: Object} = {}) {
+        this.options = options;
+        this.keys = options.keys;
+        this.setObjects(objects);
+
+        // By default, we remove any non-alphanumeric characters ([^A-Za-z0-9_]) from the
+        // query and the value being queried before matching
+        if (this.options.shouldMatchWordsOnly === undefined) {
+            this.options.shouldMatchWordsOnly = true;
+        }
+    }
+
+    setObjects(objects: Array<Object>) {
+        this.keyMap = QueryMatcher.valuesToKeyMap(objects, this.keys);
+    }
+
+    match(query: String): Array<Object> {
+        query = query.toLowerCase();
+        if (this.options.shouldMatchWordsOnly) {
+            query = query.replace(/[^\w]/g, '');
+        }
+        const results = _sortedUniq(_sortBy(_flatMap(this.keyMap.keys, (key) => {
+            let resultKey = key.toLowerCase();
+            if (this.options.shouldMatchWordsOnly) {
+                resultKey = resultKey.replace(/[^\w]/g, '');
+            }
+            return resultKey.indexOf(query) !== -1 ? this.keyMap.objectMap[key] : [];
+        }), (candidate) => this.keyMap.priorityMap.get(candidate)));
+        return results;
+    }
+}

src/autocomplete/RoomProvider.js

@@ -19,7 +19,7 @@ import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import MatrixClientPeg from '../MatrixClientPeg';
-import Fuse from 'fuse.js';
+import FuzzyMatcher from './FuzzyMatcher';
 import {PillCompletion} from './Components';
 import {getDisplayAliasForRoom} from '../Rooms';
 import sdk from '../index';
@@ -30,11 +30,9 @@ let instance = null;
 
 export default class RoomProvider extends AutocompleteProvider {
     constructor() {
-        super(ROOM_REGEX, {
-            keys: ['displayName', 'userId'],
-        });
-        this.fuse = new Fuse([], {
-           keys: ['name', 'roomId', 'aliases'],
+        super(ROOM_REGEX);
+        this.matcher = new FuzzyMatcher([], {
+            keys: ['name', 'roomId', 'aliases'],
         });
     }
 
@@ -46,17 +44,17 @@ export default class RoomProvider extends AutocompleteProvider {
         const {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
             // the only reason we need to do this is because Fuse only matches on properties
-            this.fuse.set(client.getRooms().filter(room => !!room).map(room => {
+            this.matcher.setObjects(client.getRooms().filter(room => !!room && !!getDisplayAliasForRoom(room)).map(room => {
                 return {
                     room: room,
                     name: room.name,
                     aliases: room.getAliases(),
                 };
             }));
-            completions = this.fuse.search(command[0]).map(room => {
+            completions = this.matcher.match(command[0]).map(room => {
                 let displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
-                    completion: displayAlias,
+                    completion: displayAlias + ' ',
                     component: (
                         <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
                     ),
@@ -84,8 +82,4 @@ export default class RoomProvider extends AutocompleteProvider {
             {completions}
         </div>;
     }
-
-    shouldForceComplete(): boolean {
-        return true;
-    }
 }

src/autocomplete/UserProvider.js

@@ -1,3 +1,4 @@
+//@flow
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
@@ -18,21 +19,27 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import Fuse from 'fuse.js';
 import {PillCompletion} from './Components';
 import sdk from '../index';
+import FuzzyMatcher from './FuzzyMatcher';
+import _pull from 'lodash/pull';
+import _sortBy from 'lodash/sortBy';
+import MatrixClientPeg from '../MatrixClientPeg';
+
+import type {Room, RoomMember} from 'matrix-js-sdk';
 
 const USER_REGEX = /@\S*/g;
 
 let instance = null;
 
 export default class UserProvider extends AutocompleteProvider {
+    users: Array<RoomMember> = [];
+
     constructor() {
         super(USER_REGEX, {
             keys: ['name', 'userId'],
         });
-        this.users = [];
-        this.fuse = new Fuse([], {
+        this.matcher = new FuzzyMatcher([], {
             keys: ['name', 'userId'],
         });
     }
@@ -43,8 +50,7 @@ export default class UserProvider extends AutocompleteProvider {
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
-            this.fuse.set(this.users);
-            completions = this.fuse.search(command[0]).map(user => {
+            completions = this.matcher.match(command[0]).map(user => {
                 let displayName = (user.name || user.userId || '').replace(' (IRC)', ''); // FIXME when groups are done
                 let completion = displayName;
                 if (range.start === 0) {
@@ -71,8 +77,31 @@ export default class UserProvider extends AutocompleteProvider {
         return '👥 ' + _t('Users');
     }
 
-    setUserList(users) {
-        this.users = users;
+    setUserListFromRoom(room: Room) {
+        const events = room.getLiveTimeline().getEvents();
+        const lastSpoken = {};
+
+        for(const event of events) {
+            lastSpoken[event.getSender()] = event.getTs();
+        }
+
+        const currentUserId = MatrixClientPeg.get().credentials.userId;
+        this.users = room.getJoinedMembers().filter((member) => {
+            if (member.userId !== currentUserId) return true;
+        });
+
+        this.users = _sortBy(this.users, (user) => 1E20 - lastSpoken[user.userId] || 1E20);
+
+        this.matcher.setObjects(this.users);
+    }
+
+    onUserSpoke(user: RoomMember) {
+        if(user.userId === MatrixClientPeg.get().credentials.userId) return;
+
+        // Probably unsafe to compare by reference here?
+        _pull(this.users, user);
+        this.users.splice(0, 0, user);
+        this.matcher.setObjects(this.users);
     }
 
     static getInstance(): UserProvider {