feat(hoverifier): close overlay if a click happens outside a code view

Stops propagation of handled click events and registers a listener on window that closes the overlay

Author: felixfbecker

src/hoverifier.ts

@@ -10,6 +10,7 @@ import {
     share,
     switchMap,
     takeUntil,
+    tap,
     withLatestFrom,
 } from 'rxjs/operators'
 import { Key } from 'ts-key-enum'
@@ -253,18 +254,18 @@ export const createHoverifier = ({
     ): event is MouseEventTrigger & { eventType: T } => event.eventType === type
     const allCodeMouseMoves = allPositionsFromEvents.pipe(filter(isEventType('mousemove')))
     const allCodeMouseOvers = allPositionsFromEvents.pipe(filter(isEventType('mouseover')))
-    const allCodeClicks = allPositionsFromEvents.pipe(filter(isEventType('click')))
+    const allCodeClicks = allPositionsFromEvents.pipe(
+        filter(isEventType('click')),
+        // Stop propagation of the click events we handle,
+        // so that our window click listener can safely close the overlay
+        // and not worry about bubbling events
+        tap(({ event }) => event.stopPropagation())
+    )
 
     const allPositionJumps = new Subject<PositionJump & EventOptions>()
 
     const subscription = new Subscription()
 
-    /**
-     * click events on the code element, ignoring click events caused by the user selecting text.
-     * Selecting text should not mess with the hover, hover pinning nor the URL.
-     */
-    const codeClicksWithoutSelections = allCodeClicks.pipe(filter(() => window.getSelection().toString() === ''))
-
     // Mouse is moving, don't show the tooltip
     subscription.add(
         merge(
@@ -299,7 +300,7 @@ export const createHoverifier = ({
         share()
     )
 
-    const codeClickTargets = codeClicksWithoutSelections.pipe(
+    const codeClickTargets = allCodeClicks.pipe(
         filter(({ event }) => event.currentTarget !== null),
         map(({ event, ...rest }) => ({
             target: event.target as HTMLElement,
@@ -521,13 +522,13 @@ export const createHoverifier = ({
         })
     )
 
-    // When the close button is clicked, unpin, hide and reset the hover
+    // When the close button is clicked, ESC is pressed or outside a code view is clicked unpin, hide and reset the hover
     subscription.add(
         merge(
             closeButtonClicks,
-            fromEvent<KeyboardEvent>(window, 'keydown').pipe(filter(event => event.key === Key.Escape))
-        ).subscribe(event => {
-            event.preventDefault()
+            fromEvent<KeyboardEvent>(window, 'keydown').pipe(filter(event => event.key === Key.Escape)),
+            fromEvent<MouseEvent>(window, 'click')
+        ).subscribe(() => {
             container.update({
                 hoverOverlayIsFixed: false,
                 hoverOverlayPosition: undefined,