Merge pull request #1158 from matrix-org/luke/feature-rte-quick-emoji

Implement ascii emoji tab completion

scripts/emoji-data-strip.js

@@ -5,13 +5,17 @@ const fs = require('fs');
 const output = Object.keys(EMOJI_DATA).map(
     (key) => {
         const datum = EMOJI_DATA[key];
-        return {
+        const newDatum = {
             name: datum.name,
             shortname: datum.shortname,
             category: datum.category,
             emoji_order: datum.emoji_order,
         };
-    },
+        if (datum.aliases_ascii.length > 0) {
+            newDatum.aliases_ascii = datum.aliases_ascii;
+        }
+        return newDatum;
+    }
 );
 
 // Write to a file in src. Changes should be checked into git. This file is copied by

src/autocomplete/EmojiProvider.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
+import {emojioneList, shortnameToImage, shortnameToUnicode, asciiRegexp} from 'emojione';
 import FuzzyMatcher from './FuzzyMatcher';
 import sdk from '../index';
 import {PillCompletion} from './Components';
@@ -40,7 +40,8 @@ const CATEGORY_ORDER = [
     'modifier',
 ];
 
-const EMOJI_REGEX = /:\w*:?/g;
+// Match for ":wink:" or ascii-style ";-)" provided by emojione
+const EMOJI_REGEX = new RegExp('(:\\w*:?|' + asciiRegexp + ')', 'g');
 const EMOJI_SHORTNAMES = Object.keys(EmojiData).map((key) => EmojiData[key]).sort(
     (a, b) => {
         if (a.category === b.category) {
@@ -52,6 +53,7 @@ const EMOJI_SHORTNAMES = Object.keys(EmojiData).map((key) => EmojiData[key]).sor
     return {
         name: a.name,
         shortname: a.shortname,
+        aliases_ascii: a.aliases_ascii ? a.aliases_ascii.join(' ') : '',
     };
 });
 
@@ -61,7 +63,9 @@ export default class EmojiProvider extends AutocompleteProvider {
     constructor() {
         super(EMOJI_REGEX);
         this.matcher = new FuzzyMatcher(EMOJI_SHORTNAMES, {
-            keys: ['shortname', 'name'],
+            keys: ['aliases_ascii', 'shortname', 'name'],
+            // For matching against ascii equivalents
+            shouldMatchWordsOnly: false,
         });
     }
 

src/autocomplete/QueryMatcher.js

@@ -63,6 +63,12 @@ export default class QueryMatcher {
         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>) {
@@ -70,9 +76,16 @@ export default class QueryMatcher {
     }
 
     match(query: String): Array<Object> {
-        query = query.toLowerCase().replace(/[^\w]/g, '');
+        query = query.toLowerCase();
+        if (this.options.shouldMatchWordsOnly) {
+            query = query.replace(/[^\w]/g, '');
+        }
         const results = _sortedUniq(_sortBy(_flatMap(this.keyMap.keys, (key) => {
-            return key.toLowerCase().replace(/[^\w]/g, '').indexOf(query) >= 0 ? this.keyMap.objectMap[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;
     }