compose: Add compose typeahead for stream+topic mentions.

We implement 3 changes:

1. Partial Stream Typeahead

   In addition to regular stream completion, we do partial completion
   of stream typeahead on pressing '>'. We use our custom addition to
   typeahead.js: this.trigger_selection to start topic_list typeahead.

   Implements: `#stream na|` (press >) => `#**stream name>|`.

2. Topic Jump Typeahead

   'topic_jump' typeahead moves the cursor from just ahead of a
   completed stream-mention to just after the end of the mention
   text and is triggered by typing '>' after the stream mention.
   This typeahead merely uses the regex matching and event hooks of
   the typeahead library instead of displaying any text completions.

   Implements: `#**stream name** >|` => `#**stream name>|`.

3. Topic List Typeahead

   'topic_list' typeahead shows the list of recent topics of a stream
   and if your current text doesn't match one of them, also shows you
   the current query text, allowing you to create mentions for topics
   that do not exist yet.

   Implements: `#**stream name>someth|` => `#**stream name>something** |`.

At the end of this commit, we support the following mechanisms to
complete the stream-topic mention:

1. Type "#denmar|".
2. Press Enter to get "#**Denmark** |".
3. Press > to get "#**Denmark>|".
4. Type topic name and press enter.

OR

1. Type "#denmar|".
2. Type > to get "#**Denmark>|".
3. Type topic name and press enter.

Both result in the final inserted syntax: "#**Denmark>topic name**".

Documentation is still pending.

Fixes #4836.
This commit is contained in:
Rohitt Vashishtha
2019-06-25 18:21:47 +05:30
committed by Tim Abbott
parent 83cbd62ba1
commit 5fc37c5f9b
2 changed files with 137 additions and 2 deletions

View File

@@ -1109,6 +1109,7 @@ run_test('begins_typeahead', () => {
slash: true,
stream: true,
syntax: true,
topic: true,
}}};
function get_values(input, rest) {
@@ -1282,6 +1283,18 @@ run_test('begins_typeahead', () => {
assert_typeahead_equals("test\n~~~ p", lang_list);
assert_typeahead_equals("test\n~~~ p", lang_list);
// topic_jump
assert_typeahead_equals("@**a person**>", false);
assert_typeahead_equals("@**a person** >", false);
assert_typeahead_equals("#**stream**>", ['']); // this is deliberately a blank choice.
assert_typeahead_equals("#**stream** >", ['']);
// topic_list
var sweden_topics_to_show = topic_data.get_recent_names(1); //includes "more ice"
assert_typeahead_equals("#**Sweden>more ice", sweden_topics_to_show);
sweden_topics_to_show.push('totally new topic');
assert_typeahead_equals("#**Sweden>totally new topic", sweden_topics_to_show);
// Following tests place the cursor before the second string
assert_typeahead_equals("#test", "ing", false);
assert_typeahead_equals("@test", "ing", false);