copy_and_paste: Fix our logic being confused about selected messages.

If the selection stays inside a message header and there
are messages before the message header, our logic thinks `end_id`
is message before the header while `start_id` and `end_id` should
be that same.

It is best to just let browser handle the copy paste in this case.

Author: amanagr

web/src/copy_and_paste.ts

@@ -174,11 +174,21 @@ export function copy_handler(): void {
     const skip_same_td_check = analysis.skip_same_td_check;
     const $div = $("<div>");
 
-    if (start_id === undefined || end_id === undefined) {
+    if (start_id === undefined || end_id === undefined || start_id > end_id) {
         // In this case either the starting message or the ending
         // message is not defined, so this is definitely not a
         // multi-message selection and we can let the browser handle
         // the copy.
+        //
+        // Also, if our logic is not sound about the selection range
+        // (start_id > end_id), we let the browser handle the copy.
+        //
+        // NOTE: `startContainer (~ start_id)` and `endContainer (~ end_id)`
+        // of a `Range` are always from top to bottom in the DOM tree, independent
+        // of the direction of the selection.
+        // TODO: Add a reference for this statement, I just tested
+        // it in console for various selection directions and found this
+        // to be the case not sure why there is no online reference for it.
         document.execCommand("copy");
         return;
     }
@@ -312,6 +322,10 @@ function get_end_tr_from_endc($endc: JQuery<Node>): JQuery {
         }
         // If it's not in a .message_row, it's probably in a .message_header and
         // we can use the last message from the previous recipient_row.
+        // NOTE: It is possible that the selection started and ended inside the
+        // message header and in that case we would be returning the message before
+        // the selected header if it exists, but that is not the purpose of this
+        // function to handle.
         if ($endc.parents(".message_header").length > 0) {
             const $overflow_recipient_row = $endc.parents(".recipient_row").first();
             return $overflow_recipient_row.prev(".recipient_row").children(".message_row").last();