Block nav-away from page during highlight creation

- covers tooltip and KB shortcut methods

src/content-scripts/content_script/global.ts

@@ -97,7 +97,6 @@ import { HIGHLIGHT_COLORS_DEFAULT } from '@worldbrain/memex-common/lib/common-ui
 import { PKMSyncBackgroundModule } from 'src/pkm-integrations/background'
 import { injectTelegramCustomUI } from './injectionUtils/telegram'
 import { renderSpacesBar } from './injectionUtils/utils'
-import { getTimestampedNoteWithAIsummaryForYoutubeNotes } from './injectionUtils/youtube'
 import {
     injectTwitterProfileUI,
     trackTwitterMessageList,
@@ -113,7 +112,6 @@ import type { InPageUIComponent } from 'src/in-page-ui/shared-state/types'
 import type { RemoteCopyPasterInterface } from 'src/copy-paster/background/types'
 import type { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 import type { InPageUIInterface } from 'src/in-page-ui/background/types'
-import type { Storage } from 'webextension-polyfill'
 import type { PseudoSelection } from '@worldbrain/memex-common/lib/in-page-ui/types'
 import {
     cloneSelectionAsPseudoObject,
@@ -125,6 +123,7 @@ import {
 } from '@worldbrain/memex-common/lib/subscriptions/constants'
 import type { RemoteSearchInterface } from 'src/search/background/types'
 import * as anchoring from '@worldbrain/memex-common/lib/annotations'
+import type { TaskState } from 'ui-logic-core/lib/types'
 
 // Content Scripts are separate bundles of javascript code that can be loaded
 // on demand by the browser, as needed. This main function manages the initialisation
@@ -578,7 +577,17 @@ export async function main(
             quality: 100,
         })
 
+    let highlightCreateState: TaskState = 'pristine'
+    // Block nav away from current page while highlight being created
+    window.addEventListener('beforeunload', (e) => {
+        let shouldBlockUnload = highlightCreateState === 'running'
+        if (shouldBlockUnload) {
+            e.preventDefault()
+        }
+    })
+
     const annotationsFunctions = {
+        // TODO: Simplify and move this logic away from here
         createHighlight: (
             analyticsEvent?: AnalyticsEvent<'Highlights'>,
         ) => async (
@@ -589,6 +598,7 @@ export async function main(
             highlightColorSetting?: HighlightColor,
             preventHideTooltip?: boolean,
         ) => {
+            highlightCreateState = 'running'
             let anchor: Anchor
             let quote: string
 
@@ -603,6 +613,7 @@ export async function main(
                 anchor = { quote, descriptor }
             }
             if (quote?.length === 0 && !drawRectangle) {
+                highlightCreateState = 'success'
                 return
             }
 
@@ -618,7 +629,7 @@ export async function main(
                 sidebarEvents.emit('showPowerUpModal', {
                     limitReachedNotif: 'Bookmarks',
                 })
-
+                highlightCreateState = 'error'
                 return
             }
 
@@ -647,6 +658,7 @@ export async function main(
                     screenshotGrabResult == null ||
                     screenshotGrabResult.anchor == null
                 ) {
+                    highlightCreateState = 'success'
                     return
                 }
 
@@ -722,8 +734,10 @@ export async function main(
                 }
             }
 
+            highlightCreateState = 'success'
             return annotationId
         },
+        // TODO: Simplify and move this logic away from here
         createAnnotation: (
             analyticsEvent?: AnalyticsEvent<'Annotations'>,
         ) => async (
@@ -734,8 +748,10 @@ export async function main(
             commentText?: string,
             highlightColorSetting?: HighlightColor,
         ) => {
+            highlightCreateState = 'running'
             const selectionEmpty = !selection?.toString().length
             if (selectionEmpty) {
+                highlightCreateState = 'success'
                 return
             }
 
@@ -761,6 +777,7 @@ export async function main(
                 sidebarEvents.emit('showPowerUpModal', {
                     limitReachedNotif: 'Bookmarks',
                 })
+                highlightCreateState = 'error'
                 return
             }
 
@@ -787,6 +804,7 @@ export async function main(
                     screenshotGrabResult == null ||
                     screenshotGrabResult.anchor == null
                 ) {
+                    highlightCreateState = 'success'
                     return
                 }
 
@@ -868,6 +886,7 @@ export async function main(
                     )
                 }
             }
+            highlightCreateState = 'success'
         },
         askAI: () => (
             highlightedText: string,