feat: Add clickable links in cell overflow modal (#1147)

Closes #1128 

Links without `https` are also recognized as links. I couldn't figure
out how to disable the tooltip or open the link upon left click.

Author: emilyhuxng

package-lock.json

@@ -32,6 +32,7 @@
     "@deephaven/utils": "file:../utils",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "classnames": "^2.3.1",
+    "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "memoize-one": "^5.1.1",

packages/console/package.json

@@ -65,4 +65,9 @@
   editor-suggest-widget-selected-background: mix($primary, $gray-700, 15%);
   editor-suggest-widget-highlightForeground: $primary;
   list-hover-background: $gray-600;
+
+  // links
+  text-link-foreground: $link-color;
+  text-link-active-foreground: $link-hover-color;
+  editor-link-active-foreground: $link-hover-color;
 }

packages/console/src/monaco/MonacoTheme.module.scss

@@ -150,3 +150,30 @@ describe('Mac shortcuts', () => {
     );
   });
 });
+
+describe('provideLinks', () => {
+  it('it should get a provideLinks function which should return an object with the links', () => {
+    const { provideLinks } = MonacoUtils;
+    const mockModel: monaco.editor.ITextModel = ({
+      getLineCount: jest.fn(() => 2),
+      getLineContent: jest.fn(lineNumber =>
+        lineNumber === 1
+          ? 'google.com http://www.example.com/'
+          : 'mail@gmail.com'
+      ),
+    } as unknown) as monaco.editor.ITextModel;
+
+    const expectedValue = {
+      links: [
+        { url: 'http://google.com', range: new monaco.Range(1, 1, 1, 11) },
+        {
+          url: 'http://www.example.com/',
+          range: new monaco.Range(1, 12, 1, 35),
+        },
+        { url: 'mailto:mail@gmail.com', range: new monaco.Range(2, 1, 2, 15) },
+      ],
+    };
+
+    expect(provideLinks(mockModel)).toEqual(expectedValue);
+  });
+});

packages/console/src/monaco/MonacoUtils.test.ts

@@ -5,6 +5,7 @@
 import { Shortcut } from '@deephaven/components';
 import { IdeSession } from '@deephaven/jsapi-shim';
 import { assertNotNull } from '@deephaven/utils';
+import { find as linkifyFind } from 'linkifyjs';
 import * as monaco from 'monaco-editor';
 import type { Environment } from 'monaco-editor';
 // @ts-ignore
@@ -140,6 +141,10 @@ class MonacoUtils {
       'input.background': MonacoTheme['input-background'],
       'input.foreground': MonacoTheme['input-foreground'],
       'input.border': MonacoTheme['input-border'],
+      'textLink.foreground': MonacoTheme['text-link-foreground'],
+      'textLink.activeForeground': MonacoTheme['text-link-active-foreground'],
+      'editorLink.activeForeground':
+        MonacoTheme['editor-link-active-foreground'],
     };
 
     monaco.editor.defineTheme('dh-dark', {
@@ -450,6 +455,28 @@ class MonacoUtils {
       KeyCodeUtils.fromString(keyValue)
     );
   }
+
+  static provideLinks(
+    model: monaco.editor.ITextModel
+  ): { links: monaco.languages.ILink[] } {
+    const newTokens: monaco.languages.ILink[] = [];
+
+    for (let i = 1; i <= model.getLineCount(); i += 1) {
+      const lineText = model.getLineContent(i);
+      const tokens = linkifyFind(lineText);
+      // map the tokens to the ranges - you know the line number now, use the token start/end as the startColumn/endColumn
+      tokens.forEach(token => {
+        newTokens.push({
+          url: token.href,
+          range: new monaco.Range(i, token.start + 1, i, token.end + 1),
+        });
+      });
+    }
+
+    return {
+      links: newTokens,
+    };
+  }
 }
 
 export default MonacoUtils;

packages/console/src/monaco/MonacoUtils.ts

@@ -0,0 +1,5 @@
+@import '@deephaven/components/scss/custom.scss';
+
+.monaco-editor .detected-link {
+  color: $link-color;
+}

packages/console/src/notebook/Editor.scss

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import * as monaco from 'monaco-editor';
 import { assertNotNull } from '@deephaven/utils';
 import MonacoUtils from '../monaco/MonacoUtils';
+import './Editor.scss';
 
 interface EditorProps {
   className: string;
@@ -89,6 +90,7 @@ class Editor extends Component<EditorProps, Record<string, never>> {
       tabCompletion: 'on',
       value: '',
       wordWrap: 'off',
+      links: true,
       ...settings,
     };
     assertNotNull(this.container);
@@ -112,6 +114,10 @@ class Editor extends Component<EditorProps, Record<string, never>> {
     this.editor.layout();
     MonacoUtils.removeConflictingKeybindings(this.editor);
 
+    monaco.languages.registerLinkProvider('plaintext', {
+      provideLinks: MonacoUtils.provideLinks,
+    });
+
     onEditorInitialized(this.editor);
   }