Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/a11y/composer-list-autocomplete

 Conflicts:

	src/components/views/rooms/BasicMessageComposer.tsx

	src/editor/autocomplete.ts

src/autocomplete/Autocompleter.ts

@@ -27,8 +27,8 @@ import EmojiProvider from './EmojiProvider';
 import NotifProvider from './NotifProvider';
 import { timeout } from "../utils/promise";
 import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
-import SettingsStore from "../settings/SettingsStore";
 import SpaceProvider from "./SpaceProvider";
+import SpaceStore from "../stores/SpaceStore";
 
 export interface ISelectionRange {
     beginning?: boolean; // whether the selection is in the first block of the editor or not
@@ -58,8 +58,7 @@ const PROVIDERS = [
     DuckDuckGoProvider,
 ];
 
-// as the spaces feature is device configurable only, and toggling it refreshes the page, we can do this here
-if (SettingsStore.getValue("feature_spaces")) {
+if (SpaceStore.spacesEnabled) {
     PROVIDERS.push(SpaceProvider);
 } else {
     PROVIDERS.push(CommunityProvider);

src/autocomplete/EmojiProvider.tsx

@@ -25,7 +25,6 @@ import { PillCompletion } from './Components';
 import { ICompletion, ISelectionRange } from './Autocompleter';
 import { uniq, sortBy } from 'lodash';
 import SettingsStore from "../settings/SettingsStore";
-import { shortcodeToUnicode } from '../HtmlUtils';
 import { EMOJI, IEmoji } from '../emoji';
 
 import EMOTICON_REGEX from 'emojibase-regex/emoticon';
@@ -36,20 +35,18 @@ const LIMIT = 20;
 // anchored to only match from the start of parts otherwise it'll show emoji suggestions whilst typing matrix IDs
 const EMOJI_REGEX = new RegExp('(' + EMOTICON_REGEX.source + '|(?:^|\\s):[+-\\w]*:?)$', 'g');
 
-interface IEmojiShort {
+interface ISortedEmoji {
     emoji: IEmoji;
-    shortname: string;
     _orderBy: number;
 }
 
-const EMOJI_SHORTNAMES: IEmojiShort[] = EMOJI.sort((a, b) => {
+const SORTED_EMOJI: ISortedEmoji[] = EMOJI.sort((a, b) => {
     if (a.group === b.group) {
         return a.order - b.order;
     }
     return a.group - b.group;
 }).map((emoji, index) => ({
     emoji,
-    shortname: `:${emoji.shortcodes[0]}:`,
     // Include the index so that we can preserve the original order
     _orderBy: index,
 }));
@@ -64,20 +61,18 @@ function score(query, space) {
 }
 
 export default class EmojiProvider extends AutocompleteProvider {
-    matcher: QueryMatcher<IEmojiShort>;
-    nameMatcher: QueryMatcher<IEmojiShort>;
+    matcher: QueryMatcher<ISortedEmoji>;
+    nameMatcher: QueryMatcher<ISortedEmoji>;
 
     constructor() {
         super(EMOJI_REGEX);
-        this.matcher = new QueryMatcher<IEmojiShort>(EMOJI_SHORTNAMES, {
-            keys: ['emoji.emoticon', 'shortname'],
-            funcs: [
-                (o) => o.emoji.shortcodes.length > 1 ? o.emoji.shortcodes.slice(1).map(s => `:${s}:`).join(" ") : "", // aliases
-            ],
+        this.matcher = new QueryMatcher<ISortedEmoji>(SORTED_EMOJI, {
+            keys: ['emoji.emoticon'],
+            funcs: [o => o.emoji.shortcodes.map(s => `:${s}:`)],
             // For matching against ascii equivalents
             shouldMatchWordsOnly: false,
         });
-        this.nameMatcher = new QueryMatcher(EMOJI_SHORTNAMES, {
+        this.nameMatcher = new QueryMatcher(SORTED_EMOJI, {
             keys: ['emoji.annotation'],
             // For removing punctuation
             shouldMatchWordsOnly: true,
@@ -105,34 +100,33 @@ export default class EmojiProvider extends AutocompleteProvider {
 
             const sorters = [];
             // make sure that emoticons come first
-            sorters.push((c) => score(matchedString, c.emoji.emoticon || ""));
+            sorters.push(c => score(matchedString, c.emoji.emoticon || ""));
 
-            // then sort by score (Infinity if matchedString not in shortname)
-            sorters.push((c) => score(matchedString, c.shortname));
+            // then sort by score (Infinity if matchedString not in shortcode)
+            sorters.push(c => score(matchedString, c.emoji.shortcodes[0]));
             // then sort by max score of all shortcodes, trim off the `:`
-            sorters.push((c) => Math.min(...c.emoji.shortcodes.map(s => score(matchedString.substring(1), s))));
-            // If the matchedString is not empty, sort by length of shortname. Example:
+            sorters.push(c => Math.min(
+                ...c.emoji.shortcodes.map(s => score(matchedString.substring(1), s)),
+            ));
+            // If the matchedString is not empty, sort by length of shortcode. Example:
             //  matchedString = ":bookmark"
             //  completions = [":bookmark:", ":bookmark_tabs:", ...]
             if (matchedString.length > 1) {
-                sorters.push((c) => c.shortname.length);
+                sorters.push(c => c.emoji.shortcodes[0].length);
             }
             // Finally, sort by original ordering
-            sorters.push((c) => c._orderBy);
+            sorters.push(c => c._orderBy);
             completions = sortBy(uniq(completions), sorters);
 
-            completions = completions.map(({ shortname }) => {
-                const unicode = shortcodeToUnicode(shortname);
-                return {
-                    completion: unicode,
-                    component: (
-                        <PillCompletion title={shortname} aria-label={unicode}>
-                            <span>{ unicode }</span>
-                        </PillCompletion>
-                    ),
-                    range,
-                };
-            }).slice(0, LIMIT);
+            completions = completions.map(c => ({
+                completion: c.emoji.unicode,
+                component: (
+                    <PillCompletion title={`:${c.emoji.shortcodes[0]}:`} aria-label={c.emoji.unicode}>
+                        <span>{ c.emoji.unicode }</span>
+                    </PillCompletion>
+                ),
+                range,
+            })).slice(0, LIMIT);
         }
         return completions;
     }

src/autocomplete/RoomProvider.tsx

@@ -28,7 +28,7 @@ import { PillCompletion } from './Components';
 import { makeRoomPermalink } from "../utils/permalinks/Permalinks";
 import { ICompletion, ISelectionRange } from "./Autocompleter";
 import RoomAvatar from '../components/views/avatars/RoomAvatar';
-import SettingsStore from "../settings/SettingsStore";
+import SpaceStore from "../stores/SpaceStore";
 
 const ROOM_REGEX = /\B#\S*/g;
 
@@ -59,7 +59,8 @@ export default class RoomProvider extends AutocompleteProvider {
         const cli = MatrixClientPeg.get();
         let rooms = cli.getVisibleRooms();
 
-        if (SettingsStore.getValue("feature_spaces")) {
+        // if spaces are enabled then filter them out here as they get their own autocomplete provider
+        if (SpaceStore.spacesEnabled) {
             rooms = rooms.filter(r => !r.isSpaceRoom());
         }
 

src/autocomplete/UserProvider.tsx

@@ -109,7 +109,7 @@ export default class UserProvider extends AutocompleteProvider {
         limit = -1,
     ): Promise<ICompletion[]> {
         // lazy-load user list into matcher
-        if (!this.users) this._makeUsers();
+        if (!this.users) this.makeUsers();
 
         let completions = [];
         const { command, range } = this.getCurrentCommand(rawQuery, selection, force);
@@ -147,7 +147,7 @@ export default class UserProvider extends AutocompleteProvider {
         return _t('Users');
     }
 
-    _makeUsers() {
+    private makeUsers() {
         const events = this.room.getLiveTimeline().getEvents();
         const lastSpoken = {};