From 048c9b99e337713d83eaa3999d9c6bb6d280e494 Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Sun, 23 Jan 2022 14:54:05 +0530
Subject: [PATCH] compose: Add format hinting for polls.

Added a placeholder key to the polls slash command object. This is
selected and highlighted after being typed ahead in the compose box.
For slash commands without placeholder, everything works as before.

Formatting hints can easily be added for other slash commands too,
by adding a placeholder key to their object.

Fixes part of #20868
---
 static/js/composebox_typeahead.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/static/js/composebox_typeahead.js b/static/js/composebox_typeahead.js
index 1ce4250ccb..3acb1e0197 100644
--- a/static/js/composebox_typeahead.js
+++ b/static/js/composebox_typeahead.js
@@ -422,6 +422,7 @@ export const slash_commands = [
         text: $t({defaultMessage: "/poll Where should we go to lunch today? (Create a poll)"}),
         name: "poll",
         aliases: "",
+        placeholder: "Question",
     },
     {
         text: $t({defaultMessage: "/todo (Create a todo list)"}),
@@ -884,6 +885,9 @@ export function content_typeahead_selected(item, event) {
     let beginning = pieces[0];
     let rest = pieces[1];
     const textbox = this.$element;
+    // this highlight object will hold the start and end indices
+    // for highlighting any placeholder text
+    const highlight = {};
 
     switch (this.completing) {
         case "emoji":
@@ -936,6 +940,11 @@ export function content_typeahead_selected(item, event) {
         }
         case "slash":
             beginning = beginning.slice(0, -this.token.length - 1) + "/" + item.name + " ";
+            if (item.placeholder) {
+                beginning = beginning + item.placeholder;
+                highlight.start = item.name.length + 2;
+                highlight.end = highlight.start + item.placeholder.length;
+            }
             break;
         case "stream":
             beginning = beginning.slice(0, -this.token.length - 1);
@@ -1012,10 +1021,18 @@ export function content_typeahead_selected(item, event) {
         }
     }
 
-    // Keep the cursor after the newly inserted text, as Bootstrap will call textbox.change() to
+    // Keep the cursor after the newly inserted text / selecting the
+    // placeholder text, as Bootstrap will call textbox.change() to
     // overwrite the text in the textbox.
     setTimeout(() => {
-        textbox.caret(beginning.length, beginning.length);
+        if (item.placeholder) {
+            // This placeholder block is exclusively for slash
+            // commands, which always appear at the start of the message.
+            textbox.get(0).setSelectionRange(highlight.start, highlight.end);
+            textbox.trigger("focus");
+        } else {
+            textbox.caret(beginning.length, beginning.length);
+        }
         // Also, trigger autosize to check if compose box needs to be resized.
         compose_ui.autosize_textarea(textbox);
     }, 0);