FIX: Absorbed commas during linkify (#344)

src/core/js/ext_cosmetics.js

@@ -51,66 +51,77 @@ var cosmetics = new function () {
         });
     }
 
-  /**
-   * Remove all the custom datetime elements again, for example when entering the edit mode.
-   */
-  var _custom_datetime_clear = function() {
-    $('.caosdb-v-property-datetime-customized-newvalue').each(function () {
-      $(this).remove();
+    /**
+     * Remove all the custom datetime elements again, for example when entering the edit mode.
+     */
+    var _custom_datetime_clear = function () {
+        $('.caosdb-v-property-datetime-customized-newvalue').each(function () {
+            $(this).remove();
+        }
+        )
     }
-                                                             )
-  }
 
-    var _linkify = function () {
-        $('.caosdb-f-property-text-value').each(function (index) {
-            if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) {
-                var result = this.innerText.replace(/https?:\/\/[^\s]*/g, function (href, index) {
-                    var link_text = href;
-                    if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) {
-                        link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]";
-                    }
+    /**
+     * Return a string with all occurences of a http(s) url in a given string replaced by <a> elements
+     * @param {string} text - The text to be searched for URLs
+     */
+    function _linkify_text(text) {
+        const match_url_regex = /((https?:\/\/)?([a-z]+\.)+[a-z]{2,}(\/[^\s]*)?)/gi;
+        return text.replace(match_url_regex, function (href) {
+            var link_text = href;
+            if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) {
+                link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]";
+            }
 
-                    return `<a title="Open ${href} in a new tab." target="_blank" class="caosdb-v-property-href-value" href="${href}">${link_text} <i class="bi bi-box-arrow-up-right"></i></a>`;
-                });
+            return `<a title="Open ${href} in a new tab." target="_blank"class="caosdb-v-property-href-value" href="${href}">${link_text}<i class="bi bi-box-arrow-up-right"></i></a>`;
+        });
+    }
 
+    /**
+     * Turn all URLs in .caosdb-f-property-text-value DOM elements into actual links
+     */
+    var _linkify_all_text_values = function () {
+        $('.caosdb-f-property-text-value').each(function (index) {
+            if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) {
+                let linkified_text_value = _linkify_text(this.innerText);
                 // add class to highlight that this has been linkified already
                 // (see https://gitlab.com/caosdb/caosdb-webui/-/issues/199).
                 $(this).addClass("caosdb-v-property-linkified")
                 $(this).hide();
-                $(this).after(result);
+                $(this).after(linkified_text_value);
             }
         });
     }
 
     /**
-     * Customize datetime formatting.
+     * Convert any substring of a text-value beginning with 'http(s)://' into a
+     * link.
      *
      * A listener detects edit-mode changes and previews
      */
-    var custom_datetime = function () {
-        _custom_datetime();
+    var linkify = function () {
+        _linkify_all_text_values();
 
-        // edit-mode-listener to delete replacement
-        document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true);
-        // edit-mode-listener to recreate
-        document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true);
+        // edit-mode-listener
+        document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true);
         // preview listener
-        document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true);
+        document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true);
     }
 
     /**
-     * Convert any substring of a text-value beginning with 'http(s)://' into a
-     * link.
+     * Customize datetime formatting.
      *
      * A listener detects edit-mode changes and previews
      */
-    var linkify = function () {
-        _linkify();
+    var custom_datetime = function () {
+        _custom_datetime();
 
-        // edit-mode-listener
-        document.body.addEventListener(edit_mode.end_edit.type, _linkify, true);
+        // edit-mode-listener to delete replacement
+        document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true);
+        // edit-mode-listener to recreate
+        document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true);
         // preview listener
-        document.body.addEventListener(preview.previewReadyEvent.type, _linkify, true);
+        document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true);
     }
 
     this.init = function () {
@@ -123,7 +134,6 @@ var cosmetics = new function () {
             linkify();
         }
     }
-
 }