FIX: Absorbed commas during linkify (#344)

src/core/js/ext_cosmetics.js

@@ -61,10 +61,13 @@ var cosmetics = new function () {
         )
     }
 
-    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) {
+    /**
+     * 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) + "[...]";
@@ -72,45 +75,53 @@ var cosmetics = new function () {
 
             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();
         }
     }
-
 }