feat: wip browser ext support

Author: ijsnow

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0-DEVELOPMENT",
   "description": "Adds code intelligence to code views on the web",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib"
   ],

src/HoverOverlay.scss

@@ -1,4 +1,7 @@
 .hover-overlay {
+    $color-border: #2b3750;
+    $color-light-border: #cad2e2;
+
     position: absolute;
     width: 30rem;
     max-height: 15rem;

src/HoverOverlay.tsx

@@ -6,7 +6,7 @@ import InformationOutlineIcon from 'mdi-react/InformationOutlineIcon'
 import * as React from 'react'
 import { MarkedString, MarkupContent, MarkupKind } from 'vscode-languageserver-types'
 import { asError, ErrorLike, isErrorLike } from './errors'
-import { highlightCodeSafe, renderMarkdown } from './helpers'
+import { highlightCodeSafe, renderMarkdown, toNativeEvent } from './helpers'
 import { HoveredTokenContext } from './hoverifier'
 import { HoveredToken } from './token_position'
 import { HoverMerged, LOADING } from './types'
@@ -59,10 +59,10 @@ export interface HoverOverlayProps {
     linkComponent: React.ComponentType<{ to: string }>
 
     /** Called when the Go-to-definition button was clicked */
-    onGoToDefinitionClick?: (event: React.MouseEvent<HTMLElement>) => void
+    onGoToDefinitionClick?: (event: MouseEvent) => void
 
     /** Called when the close button is clicked */
-    onCloseButtonClick?: (event: React.MouseEvent<HTMLElement>) => void
+    onCloseButtonClick?: (event: MouseEvent) => void
 
     logTelemetryEvent: (event: string, data?: any) => void
 }
@@ -71,6 +71,9 @@ export interface HoverOverlayProps {
 export const isJumpURL = (val: any): val is { jumpURL: string } =>
     val !== null && typeof val === 'object' && typeof val.jumpURL === 'string'
 
+const transformMouseEvent = (handler: (event: MouseEvent) => void) => (event: React.MouseEvent<HTMLElement>) =>
+    handler(toNativeEvent(event))
+
 export const HoverOverlay: React.StatelessComponent<HoverOverlayProps> = props => (
     <div
         className="hover-overlay card"
@@ -91,10 +94,14 @@ export const HoverOverlay: React.StatelessComponent<HoverOverlayProps> = props =
         }
     >
         {props.showCloseButton && (
-            <button className="hover-overlay__close-button btn btn-icon" onClick={props.onCloseButtonClick}>
+            <button
+                className="hover-overlay__close-button btn btn-icon"
+                onClick={props.onCloseButtonClick ? transformMouseEvent(props.onCloseButtonClick) : undefined}
+            >
                 <CloseIcon className="icon-inline" />
             </button>
         )}
+
         {props.hoverOrError && (
             <div className="hover-overlay__contents">
                 {props.hoverOrError === LOADING ? (
@@ -157,7 +164,7 @@ export const HoverOverlay: React.StatelessComponent<HoverOverlayProps> = props =
                 linkComponent={props.linkComponent}
                 to={isJumpURL(props.definitionURLOrError) ? props.definitionURLOrError.jumpURL : undefined}
                 className="btn btn-secondary hover-overlay__action e2e-tooltip-j2d"
-                onClick={props.onGoToDefinitionClick}
+                onClick={props.onGoToDefinitionClick ? transformMouseEvent(props.onGoToDefinitionClick) : undefined}
             >
                 Go to definition {props.definitionURLOrError === LOADING && <Loader className="icon-inline" />}
             </ButtonOrLink>

src/helpers.ts

@@ -1,5 +1,6 @@
 import { highlight, highlightAuto } from 'highlight.js/lib/highlight'
 import marked from 'marked'
+import * as React from 'react'
 import sanitize from 'sanitize-html'
 import { MarkupContent } from 'vscode-languageserver-types'
 import { HoverOverlayProps, isJumpURL } from './HoverOverlay'
@@ -87,3 +88,13 @@ export const renderMarkdown = (markdown: string): string =>
             highlight: (code, language) => '<code>' + highlightCodeSafe(code, language) + '</code>',
         })
     )
+
+/**
+ * Converts a synthetic React event to a persisted, native Event object.
+ *
+ * @param event The synthetic React event object
+ */
+export const toNativeEvent = <E extends React.SyntheticEvent<T>, T>(event: E): E['nativeEvent'] => {
+    event.persist()
+    return event.nativeEvent
+}