(core) Showing links in text cells

Summary:
When there is a link in a text cell (and formula cells), it will be
rendered with a little clickable icon wrapped in the anchor tag
with a proper link. Only links that starts with https? will be
rendered as links.

Links are shown in a Text and Formula fields, inside a GridView,
CardView and in the Import preview dialog.

Test Plan: Browser tests

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: dsagal, alexmojaki

Differential Revision: https://phab.getgrist.com/D3070

app/client/ui2018/icons.ts

@@ -68,6 +68,15 @@ const iconDiv = styled('div', `
   background-color: var(--icon-color, black);
 `);
 
+export const cssIconBackground = styled(iconDiv, `
+  background-color: var(--icon-background, inherit);
+  -webkit-mask: none;
+  & .${iconDiv.className} {
+    transition: inherit;
+    display: block;
+  }
+`);
+
 export function icon(name: IconName, ...domArgs: DomElementArg[]): HTMLElement {
   return iconDiv(
     dom.style('-webkit-mask-image', `var(--icon-${name})`),

app/client/ui2018/links.ts

@@ -1,10 +1,12 @@
+import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState';
+import { colors } from 'app/client/ui2018/cssVars';
+import { CellValue } from 'app/plugin/GristData';
+import { dom, IDomArgs, Observable, styled } from 'grainjs';
+
 /**
  * Styling for a simple green <A HREF> link.
  */
 
-import { colors } from 'app/client/ui2018/cssVars';
-import { styled } from 'grainjs';
-
 // Match the font-weight of buttons.
 export const cssLink = styled('a', `
   color: ${colors.lightGreen};
@@ -16,3 +18,31 @@ export const cssLink = styled('a', `
     text-decoration: underline;
   }
 `);
+
+export function gristLink(href: string|Observable<string>, ...args: IDomArgs<HTMLElement>) {
+  return dom("a",
+    dom.attr("href", href),
+    dom.attr("target", "_blank"),
+    dom.on("click", ev => onClickHyperLink(ev, typeof href === 'string' ? href : href.get())),
+    // As per Google and Mozilla recommendations to prevent opened links
+    // from running on the same process as Grist:
+    // https://developers.google.com/web/tools/lighthouse/audits/noopener
+    dom.attr("rel", "noopener noreferrer"),
+    args
+  );
+}
+
+/**
+ * If possible (i.e. if `url` points to somewhere in the current document)
+ * use pushUrl to navigate without reloading or opening a new tab
+ */
+export async function onClickHyperLink(ev: MouseEvent, url: CellValue) {
+  // Only override plain-vanilla clicks.
+  if (ev.shiftKey || ev.metaKey || ev.ctrlKey || ev.altKey) { return; }
+
+  const newUrlState = sameDocumentUrlState(url);
+  if (!newUrlState) { return; }
+
+  ev.preventDefault();
+  await urlState().pushUrl(newUrlState);
+}