Merge pull request #3349 from matrix-org/bwindels/tab-complete-name

New composer: support forcing auto complete on name by hitting tab

src/components/views/rooms/BasicMessageComposer.js

@@ -14,6 +14,8 @@ 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 classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import EditorModel from '../../../editor/model';
@@ -75,10 +77,10 @@ export default class BasicMessageEditor extends React.Component {
         this._modifiedFlag = false;
     }
 
-    _replaceEmoticon = (caret, inputType, diff) => {
+    _replaceEmoticon = (caretPosition, inputType, diff) => {
         const {model} = this.props;
-        const range = model.startRange(caret);
-        // expand range max 8 characters backwards from caret,
+        const range = model.startRange(caretPosition);
+        // expand range max 8 characters backwards from caretPosition,
         // as a space to look for an emoticon
         let n = 8;
         range.expandBackwardsWhile((index, offset) => {
@@ -91,6 +93,7 @@ export default class BasicMessageEditor extends React.Component {
             const query = emoticonMatch[1].toLowerCase().replace("-", "");
             const data = EMOJIBASE.find(e => e.emoticon ? e.emoticon.toLowerCase() === query : false);
             if (data) {
+                const {partCreator} = model;
                 const hasPrecedingSpace = emoticonMatch[0][0] === " ";
                 // we need the range to only comprise of the emoticon
                 // because we'll replace the whole range with an emoji,
@@ -99,7 +102,7 @@ export default class BasicMessageEditor extends React.Component {
                 range.moveStart(emoticonMatch.index + (hasPrecedingSpace ? 1 : 0));
                 // this returns the amount of added/removed characters during the replace
                 // so the caret position can be adjusted.
-                return range.replace([this.props.model.partCreator.plain(data.unicode + " ")]);
+                return range.replace([partCreator.plain(data.unicode + " ")]);
             }
         }
     }
@@ -160,7 +163,7 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     _refreshLastCaretIfNeeded() {
-        // TODO: needed when going up and down in editing messages ... not sure why yet
+        // XXX: needed when going up and down in editing messages ... not sure why yet
         // because the editors should stop doing this when when blurred ...
         // maybe it's on focus and the _editorRef isn't available yet or something.
         if (!this._editorRef) {
@@ -269,6 +272,9 @@ export default class BasicMessageEditor extends React.Component {
                     default:
                         return; // don't preventDefault on anything else
                 }
+            } else if (event.key === "Tab") {
+                this._tabCompleteName();
+                handled = true;
             }
         }
         if (handled) {
@@ -277,6 +283,32 @@ export default class BasicMessageEditor extends React.Component {
         }
     }
 
+    async _tabCompleteName() {
+        try {
+            await new Promise(resolve => this.setState({showVisualBell: false}, resolve));
+            const {model} = this.props;
+            const caret = this.getCaret();
+            const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+            const range = model.startRange(position);
+            range.expandBackwardsWhile((index, offset, part) => {
+                return part.text[offset] !== " " && (part.type === "plain" || part.type === "pill-candidate");
+            });
+            const {partCreator} = model;
+            // await for auto-complete to be open
+            await model.transform(() => {
+                const addedLen = range.replace([partCreator.pillCandidate(range.text)]);
+                return model.positionForOffset(caret.offset + addedLen, true);
+            });
+            await model.autoComplete.onTab();
+            if (!model.autoComplete.hasSelection()) {
+                this.setState({showVisualBell: true});
+                model.autoComplete.close();
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
     isModified() {
         return this._modifiedFlag;
     }
@@ -304,7 +336,7 @@ export default class BasicMessageEditor extends React.Component {
         // not really, but we could not serialize the parts, and just change the autoCompleter
         partCreator.setAutoCompleteCreator(autoCompleteCreator(
             () => this._autocompleteRef,
-            query => this.setState({query}),
+            query => new Promise(resolve => this.setState({query}, resolve)),
         ));
         this.historyManager = new HistoryManager(partCreator);
         // initial render of model
@@ -345,7 +377,10 @@ export default class BasicMessageEditor extends React.Component {
                 />
             </div>);
         }
-        return (<div className="mx_BasicMessageComposer">
+        const classes = classNames("mx_BasicMessageComposer", {
+            "mx_BasicMessageComposer_input_error": this.state.showVisualBell,
+        });
+        return (<div className={classes}>
             { autoComplete }
             <div
                 className="mx_BasicMessageComposer_input"

src/components/views/rooms/SendMessageComposer.js

@@ -279,22 +279,33 @@ export default class SendMessageComposer extends React.Component {
     };
 
     _insertMention(userId) {
+        const {model} = this;
+        const {partCreator} = model;
         const member = this.props.room.getMember(userId);
         const displayName = member ?
             member.rawDisplayName : userId;
-        const userPillPart = this.model.partCreator.userPill(displayName, userId);
-        this.model.insertPartsAt([userPillPart], this._editorRef.getCaret());
+        const userPillPart = partCreator.userPill(displayName, userId);
+        const caret = this._editorRef.getCaret();
+        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+        model.transform(() => {
+            const addedLen = model.insert([userPillPart], position);
+            return model.positionForOffset(caret.offset + addedLen, true);
+        });
         // refocus on composer, as we just clicked "Mention"
         this._editorRef && this._editorRef.focus();
     }
 
     _insertQuotedMessage(event) {
-        const {partCreator} = this.model;
+        const {model} = this;
+        const {partCreator} = model;
         const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
         // add two newlines
         quoteParts.push(partCreator.newline());
         quoteParts.push(partCreator.newline());
-        this.model.insertPartsAt(quoteParts, {offset: 0});
+        model.transform(() => {
+            const addedLen = model.insert(quoteParts, model.positionForOffset(0));
+            return model.positionForOffset(addedLen, true);
+        });
         // refocus on composer, as we just clicked "Quote"
         this._editorRef && this._editorRef.focus();
     }