UI support for multiple hyperlinks in the same cell (#3597)

* fix for style ,hyperlink,tests added

* fixes #2519 hyperlink issue and added tests

* fixes #2519 ,span test,typo indent fixed

main/tests/cypress/cypress/integration/project/grid/misc/proper-display.js

@@ -0,0 +1,25 @@
+describe(__filename, function () {
+  it('proper tag assignment to each text snippet', function () {
+    const fixture = [
+      ['tests'],
+      ['2021-01-31https://www.google.com'],
+      [
+        // eslint-disable-next-line max-len
+        'https://www.wikidata.org/wiki/Property:P670 https://www.wikidata.org/wiki/Property:P669 are now mapped to https://schema.org/streetAddress via https://www.wikidata.org/wiki/Property:P2235',
+      ],
+      ['github https://github.com/OpenRefine/OpenRefine/issues/2519'],
+    ];
+    cy.loadAndVisitProject(fixture);
+
+    cy.getCell(0, 'tests').contains('2021-01-31https://www.google.com');
+    cy.getCell(1, 'tests')
+      .children('div')
+      .children('a')
+      .should('have.attr', 'href');
+    cy.getCell(1, 'tests').children('div').children('span');
+    cy.getCell(2, 'tests')
+      .children('div')
+      .children('a')
+      .should('have.attr', 'href');
+  });
+});

main/webapp/modules/core/scripts/views/data-table/cell-ui.js

@@ -96,17 +96,36 @@ DataTableCellUI.prototype._render = function() {
       nonstringSpan.className = 'data-table-value-nonstring';
       nonstringSpan.textContent = cell.v;
       divContent.appendChild(nonstringSpan);
-    } else if (URL.looksLikeUrl(cell.v)) {
-      var url = document.createElement('a');
-      url.textContent = cell.v;
-      url.setAttribute('href', cell.v);
-      url.setAttribute('target', '_blank');
-      divContent.appendChild(url);
     } else {
+      var arr = cell.v.split(" ");
+      var spanArr = [];
+      for (var i=0; i<arr.length; i++){
+        if (URL.looksLikeUrl(arr[i])) {
+          if (spanArr.length != 0) {
             var span = document.createElement('span');
-      span.textContent = cell.v;
+            span.textContent = spanArr.join(" ");
+            divContent.appendChild(span).appendChild(document.createTextNode('\u00A0'));
+            spanArr = [];
+          }
+          var url = document.createElement('a');
+          url.textContent = arr[i];
+          url.setAttribute('href', arr[i]);
+          url.setAttribute('target', '_blank');
+          if (i == arr.length-1){
+            divContent.appendChild(url)
+          } else {
+            divContent.appendChild(url).appendChild(document.createTextNode('\u00A0'));
+          }
+        } else {
+          spanArr.push(arr[i]);
+        }
+      }
+      if (spanArr.length != 0) {
+        var span = document.createElement('span');
+        span.textContent = spanArr.join(" ");
         divContent.appendChild(span);
       }
+    }  
   } else {
     var divContentRecon = $(divContent);
     var r = cell.r;