fix: on mobile open links from editor in external browser (#1860)

packages/snjs/lib/Services/ComponentManager/ComponentManager.spec.ts

@@ -14,7 +14,12 @@ import {
 } from '@standardnotes/features'
 import { ContentType } from '@standardnotes/common'
 import { GenericItem, SNComponent, Environment, Platform } from '@standardnotes/models'
-import { DesktopManagerInterface, InternalEventBusInterface, AlertService } from '@standardnotes/services'
+import {
+  DesktopManagerInterface,
+  InternalEventBusInterface,
+  AlertService,
+  DeviceInterface,
+} from '@standardnotes/services'
 import { ItemManager } from '@Lib/Services/Items/ItemManager'
 import { SNFeaturesService } from '@Lib/Services/Features/FeaturesService'
 import { SNComponentManager } from './ComponentManager'
@@ -27,6 +32,7 @@ describe('featuresService', () => {
   let syncService: SNSyncService
   let prefsService: SNPreferencesService
   let internalEventBus: InternalEventBusInterface
+  let device: DeviceInterface
 
   const desktopExtHost = 'http://localhost:123'
 
@@ -53,6 +59,7 @@ describe('featuresService', () => {
       environment,
       platform,
       internalEventBus,
+      device,
     )
     manager.setDesktopManager(desktopManager)
     return manager
@@ -81,6 +88,8 @@ describe('featuresService', () => {
 
     internalEventBus = {} as jest.Mocked<InternalEventBusInterface>
     internalEventBus.publish = jest.fn()
+
+    device = {} as jest.Mocked<DeviceInterface>
   })
 
   const nativeComponent = (identifier?: FeatureIdentifier, file_type?: FeatureDescription['file_type']) => {

packages/snjs/lib/Services/ComponentManager/ComponentManager.ts

@@ -36,6 +36,8 @@ import {
   DesktopManagerInterface,
   InternalEventBusInterface,
   AlertService,
+  DeviceInterface,
+  isMobileDevice,
 } from '@standardnotes/services'
 
 const DESKTOP_URL_PREFIX = 'sn://'
@@ -82,23 +84,21 @@ export class SNComponentManager
     private environment: Environment,
     private platform: Platform,
     protected override internalEventBus: InternalEventBusInterface,
+    private device: DeviceInterface,
   ) {
     super(internalEventBus)
     this.loggingEnabled = false
 
     this.addItemObserver()
 
-    /* On mobile, events listeners are handled by a respective component */
-    if (environment !== Environment.Mobile) {
-      window.addEventListener
-        ? window.addEventListener('focus', this.detectFocusChange, true)
-        : window.attachEvent('onfocusout', this.detectFocusChange)
-      window.addEventListener
-        ? window.addEventListener('blur', this.detectFocusChange, true)
-        : window.attachEvent('onblur', this.detectFocusChange)
+    window.addEventListener
+      ? window.addEventListener('focus', this.detectFocusChange, true)
+      : window.attachEvent('onfocusout', this.detectFocusChange)
+    window.addEventListener
+      ? window.addEventListener('blur', this.detectFocusChange, true)
+      : window.attachEvent('onblur', this.detectFocusChange)
 
-      window.addEventListener('message', this.onWindowMessage, true)
-    }
+    window.addEventListener('message', this.onWindowMessage, true)
   }
 
   get isDesktop(): boolean {
@@ -143,7 +143,7 @@ export class SNComponentManager
     this.removeItemObserver?.()
     ;(this.removeItemObserver as unknown) = undefined
 
-    if (window && !this.isMobile) {
+    if (window) {
       window.removeEventListener('focus', this.detectFocusChange, true)
       window.removeEventListener('blur', this.detectFocusChange, true)
       window.removeEventListener('message', this.onWindowMessage, true)
@@ -221,9 +221,23 @@ export class SNComponentManager
   addItemObserver(): void {
     this.removeItemObserver = this.itemManager.addObserver<SNComponent>(
       [ContentType.Component, ContentType.Theme],
-      ({ changed, inserted, source }) => {
+      ({ changed, inserted, removed, source }) => {
         const items = [...changed, ...inserted]
         this.handleChangedComponents(items, source)
+
+        const device = this.device
+        if (isMobileDevice(device) && 'addComponentUrl' in device) {
+          inserted.forEach((component) => {
+            const url = this.urlForComponent(component)
+            if (url) {
+              device.addComponentUrl(component.uuid, url)
+            }
+          })
+
+          removed.forEach((component) => {
+            device.removeComponentUrl(component.uuid)
+          })
+        }
       },
     )
   }
@@ -271,9 +285,6 @@ export class SNComponentManager
   }
 
   getActiveThemes(): SNTheme[] {
-    if (this.environment === Environment.Mobile) {
-      throw Error('getActiveThemes must be handled separately by mobile')
-    }
     return this.componentsForArea(ComponentArea.Themes).filter((theme) => {
       return theme.active
     }) as SNTheme[]
@@ -301,14 +312,10 @@ export class SNComponentManager
       }
     }
 
-    const isWeb = this.environment === Environment.Web
-    const isMobileWebView = this.environment === Environment.NativeMobileWeb
+    const isMobile = this.environment === Environment.Mobile
     if (nativeFeature) {
-      if (!isWeb && !isMobileWebView) {
-        throw Error('Mobile must override urlForComponent to handle native paths')
-      }
       let baseUrlRequiredForThemesInsideEditors = window.location.origin
-      if (isMobileWebView) {
+      if (isMobile) {
         baseUrlRequiredForThemesInsideEditors = window.location.href.split('/index.html')[0]
       }
       return `${baseUrlRequiredForThemesInsideEditors}/components/assets/${component.identifier}/${nativeFeature.index_path}`