Hide/show autocomplete based on selection state

src/components/views/rooms/Autocomplete.js

@@ -7,27 +7,27 @@ export default class Autocomplete extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            completions: []
+            completions: [],
+
+            // how far down the completion list we are
+            selectionOffset: 0
         };
     }
 
     componentWillReceiveProps(props, state) {
         if(props.query == this.props.query) return;
 
-        getCompletions(props.query).map(completionResult => {
+        getCompletions(props.query, props.selection).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
                     );
 
                     i = i == -1 ? this.state.completions.length : i;
-                    // console.log(completionResult);
                     let newCompletions = Object.assign([], this.state.completions);
                     completionResult.completions = completions;
                     newCompletions[i] = completionResult;
-                    // console.log(newCompletions);
                     this.setState({
                         completions: newCompletions
                     });
@@ -42,8 +42,7 @@ export default class Autocomplete extends React.Component {
     }
 
     render() {
-        const renderedCompletions = this.state.completions.map((completionResult, i) => {
-            // console.log(completionResult);
+        let renderedCompletions = this.state.completions.map((completionResult, i) => {
             let completions = completionResult.completions.map((completion, i) => {
                 let Component = completion.component;
                 if(Component) {

src/components/views/rooms/MessageComposer.js

@@ -36,7 +36,8 @@ export default class MessageComposer extends React.Component {
         this.onInputContentChanged = this.onInputContentChanged.bind(this);
 
         this.state = {
-            autocompleteQuery: ''
+            autocompleteQuery: '',
+            selection: null
         };
     }
 
@@ -121,11 +122,11 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    onInputContentChanged(content: string) {
+    onInputContentChanged(content: string, selection: {start: number, end: number}) {
         this.setState({
-            autocompleteQuery: content
+            autocompleteQuery: content,
+            selection
         });
-        console.log(content);
     }
 
     render() {
@@ -200,7 +201,7 @@ export default class MessageComposer extends React.Component {
         return (
             <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
                 <div className="mx_MessageComposer_autocomplete_wrapper">
-                    <Autocomplete query={this.state.autocompleteQuery} />
+                    <Autocomplete query={this.state.autocompleteQuery} selection={this.state.selection} />
                 </div>
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">

src/components/views/rooms/MessageComposerInput.js

@@ -352,7 +352,9 @@ export default class MessageComposerInput extends React.Component {
         }
 
         if(this.props.onContentChanged) {
-            this.props.onContentChanged(editorState.getCurrentContent().getPlainText());
+            this.props.onContentChanged(editorState.getCurrentContent().getPlainText(),
+                RichText.getTextSelectionOffsets(editorState.getSelection(),
+                    editorState.getCurrentContent().getBlocksAsArray()));
         }
     }