compose: Fix bug in undo operation

This fixes compose.test_video_link_compose_clicked to just
use a stub for compose_ui.insert_syntax_and_focus.

It also adds direct tests for compose_ui.insert_syntax_and_focus.

Fixes #6362

frontend_tests/node_tests/compose.js

@@ -1136,20 +1136,20 @@ function test_with_mock_socket(test_params) {
     }());
 
     (function test_video_link_compose_clicked() {
-        // Hackishly pretend caret is the same as val, since we don't
+        var syntax_to_insert;
-        // have a cursor anyway.
+
-        $('#compose-textarea').caret = function (x) {
+        compose_ui.insert_syntax_and_focus = function (syntax) {
-            $('#compose-textarea').val(x);
+            syntax_to_insert = syntax;
         };
 
         var handler = $("#compose").get_on_handler("click", "#video_link");
-        assert.equal($('#compose-textarea').val(), '');
+        $('#compose-textarea').val('');
 
         handler(event);
 
         // video link ids consist of 15 random digits
         var video_link_regex = /\[Click to join video call\]\(https:\/\/meet.jit.si\/\d{15}\)/;
-        assert(video_link_regex.test($('#compose-textarea').val()));
+        assert(video_link_regex.test(syntax_to_insert));
     }());
 
     (function test_markdown_preview_compose_clicked() {

frontend_tests/node_tests/compose_ui.js

@@ -1,5 +1,14 @@
 zrequire('compose_ui');
 
+set_global('document', {
+    execCommand: function () { return false; },
+});
+
+set_global('$', global.make_zjquery());
+set_global('blueslip', {});
+
+var noop = function () {};
+
 function make_textbox(s) {
     // Simulate a jQuery textbox for testing purposes.
     var widget = {};
@@ -45,6 +54,24 @@ function make_textbox(s) {
     return widget;
 }
 
+(function test_insert_syntax_and_focus() {
+    blueslip.error = noop;
+    blueslip.log = noop;
+    $('#compose-textarea').val("xyz ");
+    $('#compose-textarea').caret = function (syntax) {
+        if (syntax !== undefined) {
+            $('#compose-textarea').val($('#compose-textarea').val() + syntax);
+        } else {
+            return 4;
+        }
+    };
+    compose_ui.insert_syntax_and_focus(':octopus:');
+    assert.equal($('#compose-textarea').caret(), 4);
+    assert.equal($('#compose-textarea').val(), 'xyz :octopus:');
+    assert($("#compose-textarea").is_focused());
+
+}());
+
 (function test_smart_insert() {
     var textbox = make_textbox('abc ');
     textbox.caret(4);

static/js/compose_ui.js

@@ -27,8 +27,15 @@ exports.smart_insert = function (textarea, syntax) {
         }
     }
 
-    textarea.caret(syntax);
     textarea.focus();
+
+    // We prefer to use insertText, which supports things like undo better
+    // for rich-text editing features like inserting links.  But we fall
+    // back to textarea.caret if the browser doesn't support insertText.
+    if (!document.execCommand("insertText", false, syntax)) {
+        textarea.caret(syntax);
+    }
+
     // This should just call exports.autosize_textarea, but it's a bit
     // annoying for the unit tests, so we don't do that.
     textarea.trigger("autosize.resize");