compose: Add format hinting for spoilers.

Until now, whenever typeahead autocompleted the spoiler syntax, there
was no indication if and how a visible header to the hidden content
could be added.

Now when autocompleting, the word "Header" is added as a placeholder
and highlighted, hinting at the format.

Fixes: #20868.

frontend_tests/node_tests/composebox_typeahead.js

@@ -400,6 +400,14 @@ test("content_typeahead_selected", ({override}) => {
         caret_called2 = true;
         return this;
     };
+    let range_called = false;
+    fake_this.$element.range = function (...args) {
+        const [arg1, arg2] = args;
+        // .range() used in setTimeout
+        assert.ok(arg2 > arg1);
+        range_called = true;
+        return this;
+    };
     autosize_called = false;
     set_timeout_called = false;
 
@@ -621,6 +629,12 @@ test("content_typeahead_selected", ({override}) => {
     expected_value = "```python\n\n```";
     assert.equal(actual_value, expected_value);
 
+    fake_this.query = "```spo";
+    fake_this.token = "spo";
+    actual_value = ct.content_typeahead_selected.call(fake_this, "spoiler");
+    expected_value = "```spoiler translated: Header\n\n```";
+    assert.equal(actual_value, expected_value);
+
     // Test special case to not close code blocks if there is text afterward
     fake_this.query = "```p\nsome existing code";
     fake_this.token = "p";
@@ -638,6 +652,7 @@ test("content_typeahead_selected", ({override}) => {
 
     assert.ok(caret_called1);
     assert.ok(caret_called2);
+    assert.ok(range_called);
     assert.ok(autosize_called);
     assert.ok(set_timeout_called);
     assert.ok(warned_for_stream_link);

static/js/composebox_typeahead.js

@@ -862,16 +862,21 @@ export function content_typeahead_selected(item, event) {
             // Isolate the end index of the triple backticks/tildes, including
             // possibly a space afterward
             const backticks = beginning.length - this.token.length;
-            if (rest === "") {
-                // If cursor is at end of input ("rest" is empty), then
-                // complete the token before the cursor, and add a closing fence
-                // after the cursor
-                beginning = beginning.slice(0, backticks) + item + "\n";
-                rest = "\n" + beginning.slice(Math.max(0, backticks - 4), backticks).trim() + rest;
-            } else {
-                // If more text after the input, then complete the token, but don't touch
-                // "rest" (i.e. do not add a closing fence)
             beginning = beginning.slice(0, backticks) + item;
+            if (item === "spoiler") {
+                // to add in and highlight placeholder "Header"
+                const placeholder = $t({defaultMessage: "Header"});
+                highlight.start = beginning.length + 1;
+                beginning = beginning + " " + placeholder;
+                highlight.end = highlight.start + placeholder.length;
+            }
+            // If cursor is at end of input ("rest" is empty), then
+            // add a closing fence after the cursor
+            // If there is more text after the cursor, then don't
+            // touch "rest" (i.e. do not add a closing fence)
+            if (rest === "") {
+                beginning = beginning + "\n";
+                rest = "\n" + beginning.slice(Math.max(0, backticks - 4), backticks).trim() + rest;
             }
             break;
         }