Revert "compose_ui: Revert changes for replace_syntax done in 1ca4566eb2."

This reverts commit 5c833f0423.

frontend_tests/node_tests/compose_ui.js

@@ -152,17 +152,23 @@ run_test("smart_insert", ({override}) => {
     // like emojis and file links.
 });
 
-run_test("replace_syntax", () => {
+run_test("replace_syntax", ({override}) => {
     $("#compose-textarea").val("abcabc");
+    $("#compose-textarea")[0] = "compose-textarea";
+    override(text_field_edit, "replace", (elt, old_syntax, new_syntax) => {
+        assert.equal(elt, "compose-textarea");
+        assert.equal(old_syntax, "a");
+        assert.equal(new_syntax(), "A");
+    });
     compose_ui.replace_syntax("a", "A");
-    assert.equal($("#compose-textarea").val(), "Abcabc");
-
-    compose_ui.replace_syntax(/b/g, "B");
-    assert.equal($("#compose-textarea").val(), "ABcaBc");
 
+    override(text_field_edit, "replace", (elt, old_syntax, new_syntax) => {
+        assert.equal(elt, "compose-textarea");
+        assert.equal(old_syntax, "Bca");
+        assert.equal(new_syntax(), "$$\\pi$$");
+    });
     // Verify we correctly handle `$`s in the replacement syntax
     compose_ui.replace_syntax("Bca", "$$\\pi$$");
-    assert.equal($("#compose-textarea").val(), "A$$\\pi$$Bc");
 });
 
 run_test("compute_placeholder_text", () => {
@@ -253,15 +259,8 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
     let textarea_val = "";
     let textarea_caret_pos;
 
-    $("#compose-textarea").val = function (...args) {
+    $("#compose-textarea").val = function () {
-        if (args.length === 0) {
+        return textarea_val;
-            return textarea_val;
-        }
-
-        textarea_val = args[0];
-        textarea_caret_pos = textarea_val.length;
-
-        return this;
     };
 
     $("#compose-textarea").caret = function (arg) {
@@ -289,7 +288,6 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
     override(text_field_edit, "insert", (elt, syntax) => {
         assert.equal(elt, "compose-textarea");
         assert.equal(syntax, "translated: [Quoting…]\n");
-        $("#compose-textarea").caret(syntax);
     });
 
     function set_compose_content_with_caret(content) {
@@ -300,14 +298,6 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
         $("#compose-textarea").trigger("focus");
     }
 
-    function get_compose_content_with_caret() {
-        const content =
-            textarea_val.slice(0, textarea_caret_pos) +
-            "%" +
-            textarea_val.slice(textarea_caret_pos); // insert the "%"
-        return content;
-    }
-
     function reset_test_state() {
         // Reset `raw_content` property of `selected_message`.
         delete selected_message.raw_content;
@@ -318,17 +308,27 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
         $("#compose-textarea").trigger("blur");
     }
 
+    function override_with_quote_text(quote_text) {
+        override(text_field_edit, "replace", (elt, old_syntax, new_syntax) => {
+            assert.equal(elt, "compose-textarea");
+            assert.equal(old_syntax, "translated: [Quoting…]");
+            assert.equal(
+                new_syntax(),
+                "translated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n" +
+                    "```quote\n" +
+                    `${quote_text}\n` +
+                    "```",
+            );
+        });
+    }
+    let quote_text = "Testing caret position";
+    override_with_quote_text(quote_text);
     set_compose_content_with_caret("hello %there"); // "%" is used to encode/display position of focus before change
     compose_actions.quote_and_reply();
-    assert.equal(get_compose_content_with_caret(), "hello \ntranslated: [Quoting…]\n%there");
 
     success_function({
-        raw_content: "Testing caret position",
+        raw_content: quote_text,
     });
-    assert.equal(
-        get_compose_content_with_caret(),
-        "hello \ntranslated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n```quote\nTesting caret position\n```\n%there",
-    );
 
     reset_test_state();
 
@@ -336,15 +336,12 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
     // add a newline before the quoted message.
     set_compose_content_with_caret("%hello there");
     compose_actions.quote_and_reply();
-    assert.equal(get_compose_content_with_caret(), "translated: [Quoting…]\n%hello there");
 
+    quote_text = "Testing with caret initially positioned at 0.";
+    override_with_quote_text(quote_text);
     success_function({
-        raw_content: "Testing with caret initially positioned at 0.",
+        raw_content: quote_text,
     });
-    assert.equal(
-        get_compose_content_with_caret(),
-        "translated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n```quote\nTesting with caret initially positioned at 0.\n```\n%hello there",
-    );
 
     override_rewire(compose_actions, "respond_to_message", () => {
         // Reset compose state to replicate the re-opening of compose-box.
@@ -359,15 +356,12 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
     // quoting a message, the quoted message should be placed
     // at the beginning of compose-box.
     compose_actions.quote_and_reply();
-    assert.equal(get_compose_content_with_caret(), "translated: [Quoting…]\n%");
 
+    quote_text = "Testing with compose-box closed initially.";
+    override_with_quote_text(quote_text);
     success_function({
-        raw_content: "Testing with compose-box closed initially.",
+        raw_content: quote_text,
     });
-    assert.equal(
-        get_compose_content_with_caret(),
-        "translated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n```quote\nTesting with compose-box closed initially.\n```\n%",
-    );
 
     reset_test_state();
 
@@ -377,15 +371,12 @@ run_test("quote_and_reply", ({override, override_rewire}) => {
     // message should start from the beginning of compose-box.
     set_compose_content_with_caret("  \n\n \n %");
     compose_actions.quote_and_reply();
-    assert.equal(get_compose_content_with_caret(), "translated: [Quoting…]\n%");
 
+    quote_text = "Testing with compose-box containing whitespaces and newlines only.";
+    override_with_quote_text(quote_text);
     success_function({
-        raw_content: "Testing with compose-box containing whitespaces and newlines only.",
+        raw_content: quote_text,
     });
-    assert.equal(
-        get_compose_content_with_caret(),
-        "translated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n```quote\nTesting with compose-box containing whitespaces and newlines only.\n```\n%",
-    );
 });
 
 run_test("set_compose_box_top", () => {

static/js/compose_ui.js

@@ -1,6 +1,6 @@
 import autosize from "autosize";
 import $ from "jquery";
-import {insert, set, wrapSelection} from "text-field-edit";
+import {insert, replace, set, wrapSelection} from "text-field-edit";
 
 import * as common from "./common";
 import {$t} from "./i18n";
@@ -80,17 +80,11 @@ export function replace_syntax(old_syntax, new_syntax, $textarea = $("#compose-t
     // a string it will only replace the first instance. If `old_syntax` is
     // a RegExp with a global flag, it will replace all instances.
 
-    $textarea.val(
+    // We need use anonymous function for `new_syntax` to avoid JavaScript's
-        $textarea.val().replace(
+    // replace() function treating `$`s in new_syntax as special syntax.  See
-            old_syntax,
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Description
-            () =>
+    // for details.
-                // We need this anonymous function to avoid JavaScript's
+    replace($textarea[0], old_syntax, () => new_syntax);
-                // replace() function treating `$`s in new_syntax as special syntax.  See
-                // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Description
-                // for details.
-                new_syntax,
-        ),
-    );
 }
 
 export function compute_placeholder_text(opts) {