Emoji provider, DDG working, style improvements

package.json

@@ -27,6 +27,7 @@
     "draft-js-export-html": "^0.2.2",
     "draft-js-export-markdown": "^0.2.0",
     "draft-js-import-markdown": "^0.1.6",
+    "emojione": "^2.2.2",
     "favico.js": "^0.3.10",
     "filesize": "^3.1.2",
     "flux": "^2.0.3",
@@ -39,6 +40,7 @@
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^15.0.1",
+    "react-addons-css-transition-group": "^15.1.0",
     "react-dom": "^15.0.1",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
     "sanitize-html": "^1.11.1",

src/autocomplete/Autocompleter.js

@@ -2,12 +2,14 @@ import CommandProvider from './CommandProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
 import RoomProvider from './RoomProvider';
 import UserProvider from './UserProvider';
+import EmojiProvider from './EmojiProvider';
 
 const PROVIDERS = [
     CommandProvider,
     DuckDuckGoProvider,
     RoomProvider,
-    UserProvider
+    UserProvider,
+    EmojiProvider
 ].map(completer => new completer());
 
 export function getCompletions(query: String) {

src/autocomplete/Components.js

@@ -0,0 +1,13 @@
+export function TextualCompletion(props: {
+    title: ?string,
+    subtitle: ?string,
+    description: ?string
+}) {
+    return (
+        <div className="mx_Autocomplete_Completion">
+            <span>{completion.title}</span>
+            <em>{completion.subtitle}</em>
+            <span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
+        </div>
+    );
+}

src/autocomplete/DuckDuckGoProvider.js

@@ -2,31 +2,50 @@ import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import 'whatwg-fetch';
 
-const DDG_REGEX = /\/ddg\w+(.+)$/;
+const DDG_REGEX = /\/ddg\s+(.+)$/;
 const REFERER = 'vector';
 
 export default class DuckDuckGoProvider extends AutocompleteProvider {
     static getQueryUri(query: String) {
-        return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}&format=json&t=${encodeURIComponent(REFERER)}`;
+        return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
+         + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERER)}`;
     }
 
     getCompletions(query: String) {
-        if(!query)
+        let match = DDG_REGEX.exec(query);
+        if(!query || !match)
             return Q.when([]);
 
-        let promise = Q.defer();
-        fetch(DuckDuckGoProvider.getQueryUri(query), {
+        return fetch(DuckDuckGoProvider.getQueryUri(match[1]), {
             method: 'GET'
-        }).then(response => {
-            let results = response.Results.map(result => {
+        })
+            .then(response => response.json())
+            .then(json => {
+                let results = json.Results.map(result => {
                     return {
                         title: result.Text,
                         description: result.Result
                     };
                 });
-            promise.resolve(results);
+                if(json.Answer) {
+                    results.unshift({
+                        title: json.Answer,
+                        description: json.AnswerType
+                    });
+                }
+                if(json.RelatedTopics && json.RelatedTopics.length > 0) {
+                    results.unshift({
+                        title: json.RelatedTopics[0].Text
+                    });
+                }
+                if(json.AbstractText) {
+                    results.unshift({
+                        title: json.AbstractText
+                    });
+                }
+                // console.log(results);
+                return results;
             });
-        return promise;
     }
 
     getName() {

src/autocomplete/EmojiProvider.js

@@ -0,0 +1,41 @@
+import AutocompleteProvider from './AutocompleteProvider';
+import Q from 'q';
+import {emojioneList, shortnameToImage} from 'emojione';
+import Fuse from 'fuse.js';
+
+const EMOJI_REGEX = /:\w*:?/g;
+const EMOJI_SHORTNAMES = Object.keys(emojioneList);
+
+export default class EmojiProvider extends AutocompleteProvider {
+    constructor() {
+        super();
+        console.log(EMOJI_SHORTNAMES);
+        this.fuse = new Fuse(EMOJI_SHORTNAMES);
+    }
+
+    getCompletions(query: String) {
+        let completions = [];
+        const matches = query.match(EMOJI_REGEX);
+        console.log(matches);
+        if(!!matches) {
+            const command = matches[0];
+            completions = this.fuse.search(command).map(result => {
+                let shortname = EMOJI_SHORTNAMES[result];
+                let imageHTML = shortnameToImage(shortname);
+                return {
+                    title: shortname,
+                    component: (
+                        <div className="mx_Autocomplete_Completion">
+                            <span dangerouslySetInnerHTML={{__html: imageHTML}}></span> {shortname}
+                        </div>
+                    )
+                };
+            }).slice(0, 4);
+        }
+        return Q.when(completions);
+    }
+
+    getName() {
+        return 'Emoji';
+    }
+}

src/components/views/rooms/Autocomplete.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 import {getCompletions} from '../../../autocomplete/Autocompleter';
 
@@ -11,8 +12,11 @@ export default class Autocomplete extends React.Component {
     }
 
     componentWillReceiveProps(props, state) {
+        if(props.query == this.props.query) return;
+
         getCompletions(props.query).map(completionResult => {
             try {
+                console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
                 completionResult.completions.then(completions => {
                     let i = this.state.completions.findIndex(
                         completion => completion.provider === completionResult.provider
@@ -23,15 +27,16 @@ export default class Autocomplete extends React.Component {
                     let newCompletions = Object.assign([], this.state.completions);
                     completionResult.completions = completions;
                     newCompletions[i] = completionResult;
-                    console.log(newCompletions);
+                    // console.log(newCompletions);
                     this.setState({
                         completions: newCompletions
                     });
                 }, err => {
-
+                    console.error(err);
                 });
             } catch (e) {
                 // An error in one provider shouldn't mess up the rest.
+                console.error(e);
             }
         });
     }
@@ -42,23 +47,19 @@ export default class Autocomplete extends React.Component {
 
         const position = pinElement.getBoundingClientRect();
 
-        const style = {
-            position: 'fixed',
-            border: '1px solid gray',
-            background: 'white',
-            borderRadius: '4px'
-        };
 
-        this.props.pinTo.forEach(direction => {
-            style[direction] = position[direction];
-        });
 
         const renderedCompletions = this.state.completions.map((completionResult, i) => {
-            console.log(completionResult);
+            // console.log(completionResult);
             let completions = completionResult.completions.map((completion, i) => {
+                let Component = completion.component;
+                if(Component) {
+                    return Component;
+                }
+                
                 return (
-                    <div key={i} class="mx_Autocomplete_Completion">
-                        <strong>{completion.title}</strong>
+                    <div key={i} className="mx_Autocomplete_Completion">
+                        <span>{completion.title}</span>
                         <em>{completion.subtitle}</em>
                         <span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
                     </div>
@@ -67,16 +68,20 @@ export default class Autocomplete extends React.Component {
 
 
             return completions.length > 0 ? (
-                <div key={i} class="mx_Autocomplete_ProviderSection">
-                    <strong>{completionResult.provider.getName()}</strong>
+                <div key={i} className="mx_Autocomplete_ProviderSection">
+                    <span className="mx_Autocomplete_provider_name">{completionResult.provider.getName()}</span>
+                    <ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
                         {completions}
+                    </ReactCSSTransitionGroup>
                 </div>
             ) : null;
         });
 
         return (
-            <div className="mx_Autocomplete" style={style}>
+            <div className="mx_Autocomplete">
+                <ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
                     {renderedCompletions}
+                </ReactCSSTransitionGroup>
             </div>
         );
     }

src/components/views/rooms/MessageComposer.js

@@ -212,13 +212,14 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
+                <div className="mx_MessageComposer_autocomplete_wrapper">
+                    <Autocomplete query={this.state.autocompleteQuery} pinSelector=".mx_RoomView_statusArea" pinTo={['top', 'left', 'width']} />
+                </div>
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         {controls}
                     </div>
                 </div>
-
-                <Autocomplete query={this.state.autocompleteQuery} pinSelector=".mx_RoomView_statusArea" pinTo={['top', 'left', 'width']} />
             </div>
         );
     }

src/components/views/rooms/MessageComposerInput.js

@@ -352,6 +352,10 @@ export default class MessageComposerInput extends React.Component {
         } else {
             this.onFinishedTyping();
         }
+
+        if(this.props.onContentChanged) {
+            this.props.onContentChanged(editorState.getCurrentContent().getPlainText());
+        }
     }
 
     enableRichtext(enabled: boolean) {
@@ -521,5 +525,8 @@ MessageComposerInput.propTypes = {
     onResize: React.PropTypes.func,
 
     // js-sdk Room object
-    room: React.PropTypes.object.isRequired
+    room: React.PropTypes.object.isRequired,
+
+    // called with current plaintext content (as a string) whenever it changes
+    onContentChanged: React.PropTypes.func
 };