Merge branch 'release/3.20.2'

.babelrc

@@ -1,12 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-typescript",
-    "@babel/preset-env"
-  ],
-  "plugins": [
-    ["@babel/plugin-transform-react-jsx", {
-      "pragma": "h",
-      "pragmaFrag": "Fragment"
-    }]
-  ]
+  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
+  "plugins": [["@babel/plugin-transform-react-jsx"]]
 }

.github/workflows/beta.yml

@@ -6,23 +6,23 @@ on:
   workflow_dispatch:
 
 jobs:
-  tsc:
-    name: Check types & lint
+  test:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Install dependencies
         run: yarn install --pure-lockfile
-      - name: Typescript
-        run: yarn tsc
+      - name: Bundle
+        run: yarn bundle
       - name: ESLint
-        run: yarn lint --quiet
+        run: yarn lint
+      - name: Test
+        run: yarn test
 
   deploy:
     runs-on: ubuntu-latest
-    needs: tsc
+    needs: test
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/dev.yml

@@ -10,31 +10,26 @@ on:
   workflow_dispatch:
 
 jobs:
-
-  tsc:
-
-    name: Check types & lint
-
+  test:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
-
       - name: Install dependencies
         run: yarn install --pure-lockfile
-
-      - name: Typescript
-        run: yarn tsc
-
+      - name: Bundle
+        run: yarn bundle
       - name: ESLint
-        run: yarn lint --quiet
+        run: yarn lint
+      - name: Test
+        run: yarn test
+
 
   deploy:
 
     runs-on: ubuntu-latest
 
-    needs: tsc
+    needs: test
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/pr.yml

@@ -7,21 +7,16 @@ on:
       - main
 
 jobs:
-
-  tsc:
-
+  test:
     runs-on: ubuntu-latest
-
     steps:
-
       - name: Checkout code
         uses: actions/checkout@v2
-
       - name: Install dependencies
         run: yarn install --pure-lockfile
-
-      - name: Typescript
-        run: yarn tsc
-
+      - name: Bundle
+        run: yarn bundle
       - name: ESLint
-        run: yarn lint --quiet
+        run: yarn lint
+      - name: Test
+        run: yarn test

.github/workflows/prod.yml

@@ -9,32 +9,25 @@ on:
     branches: [ main ]
 
 jobs:
-
-  tsc:
-
-    name: Check types & lint
-
+  test:
     runs-on: ubuntu-latest
-
     steps:
-
       - name: Checkout code
         uses: actions/checkout@v2
-
       - name: Install dependencies
         run: yarn install --pure-lockfile
-
-      - name: Typescript
-        run: yarn tsc
-
+      - name: Bundle
+        run: yarn bundle
       - name: ESLint
-        run: yarn lint --quiet
+        run: yarn lint
+      - name: Test
+        run: yarn test
 
   deploy:
 
     runs-on: ubuntu-latest
 
-    needs: tsc
+    needs: test
 
     steps:
     - uses: actions/checkout@v2

app/assets/javascripts/App.tsx

@@ -20,16 +20,15 @@ declare global {
   }
 }
 
-import { IsWebPlatform, WebAppVersion } from '@/Version'
+import { IsWebPlatform, WebAppVersion } from '@/Constants/Version'
 import { DesktopManagerInterface, SNLog } from '@standardnotes/snjs'
-import { render } from 'preact'
-import { ApplicationGroupView } from './Components/ApplicationGroupView'
-import { WebDevice } from './Device/WebDevice'
-import { StartApplication } from './Device/StartApplication'
-import { ApplicationGroup } from './UIModels/ApplicationGroup'
-import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
-import { WebApplication } from './UIModels/Application'
-import { unmountComponentAtRoot } from './Utils/PreactUtils'
+import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
+import { WebDevice } from './Application/Device/WebDevice'
+import { StartApplication } from './Application/Device/StartApplication'
+import { ApplicationGroup } from './Application/ApplicationGroup'
+import { WebOrDesktopDevice } from './Application/Device/WebOrDesktopDevice'
+import { WebApplication } from './Application/Application'
+import { createRoot, Root } from 'react-dom/client'
 
 let keyCount = 0
 const getKey = () => {
@@ -46,21 +45,22 @@ const startApplication: StartApplication = async function startApplication(
 ) {
   SNLog.onLog = console.log
   SNLog.onError = console.error
+  let root: Root
 
   const onDestroy = () => {
-    const root = document.getElementById(RootId) as HTMLElement
-    unmountComponentAtRoot(root)
-    root.remove()
+    const rootElement = document.getElementById(RootId) as HTMLElement
+    root.unmount()
+    rootElement.remove()
     renderApp()
   }
 
   const renderApp = () => {
-    const root = document.createElement('div')
-    root.id = RootId
+    const rootElement = document.createElement('div')
+    rootElement.id = RootId
+    const appendedRootNode = document.body.appendChild(rootElement)
+    root = createRoot(appendedRootNode)
 
-    const parentNode = document.body.appendChild(root)
-
-    render(
+    root.render(
       <ApplicationGroupView
         key={getKey()}
         server={defaultSyncServerHost}
@@ -69,7 +69,6 @@ const startApplication: StartApplication = async function startApplication(
         websocketUrl={webSocketUrl}
         onDestroy={onDestroy}
       />,
-      parentNode,
     )
   }
 

app/assets/javascripts/UIModels/Application.ts → app/assets/javascripts/Application/Application.ts

@@ -1,55 +1,56 @@
-import { WebCrypto } from '@/Crypto'
+import { WebCrypto } from '@/Application/Crypto'
 import { WebAlertService } from '@/Services/AlertService'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { AutolockService } from '@/Services/AutolockService'
 import { DesktopManager } from '@/Services/DesktopManager'
 import { IOService } from '@/Services/IOService'
 import { ThemeManager } from '@/Services/ThemeManager'
-import { AppState } from '@/UIModels/AppState'
-import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
 import {
   DeinitSource,
   Platform,
   SNApplication,
   NoteGroupController,
   removeFromArray,
   IconsController,
-  Runtime,
   DesktopDeviceInterface,
   isDesktopDevice,
   DeinitMode,
+  PrefKey,
+  SNTag,
+  ContentType,
+  DecryptedItemInterface,
 } from '@standardnotes/snjs'
+import { makeObservable, observable } from 'mobx'
+import { PanelResizedData } from '@/Types/PanelResizedData'
+import { WebAppEvent } from './WebAppEvent'
+import { isDesktopApplication } from '@/Utils'
 
 type WebServices = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   desktopService?: DesktopManager
   autolockService: AutolockService
   archiveService: ArchiveManager
   themeService: ThemeManager
   io: IOService
 }
 
-export enum WebAppEvent {
-  NewUpdateAvailable = 'NewUpdateAvailable',
-  DesktopWindowGainedFocus = 'DesktopWindowGainedFocus',
-  DesktopWindowLostFocus = 'DesktopWindowLostFocus',
-}
-
-export type WebEventObserver = (event: WebAppEvent) => void
+export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void
 
 export class WebApplication extends SNApplication {
   private webServices!: WebServices
   private webEventObservers: WebEventObserver[] = []
   public noteControllerGroup: NoteGroupController
   public iconsController: IconsController
+  private onVisibilityChange: () => void
 
   constructor(
     deviceInterface: WebOrDesktopDevice,
     platform: Platform,
     identifier: string,
     defaultSyncServerHost: string,
     webSocketUrl: string,
-    runtime: Runtime,
   ) {
     super({
       environment: deviceInterface.environment,
@@ -61,12 +62,26 @@ export class WebApplication extends SNApplication {
       defaultHost: defaultSyncServerHost,
       appVersion: deviceInterface.appVersion,
       webSocketUrl: webSocketUrl,
-      runtime,
+      supportsFileNavigation: window.enabledUnfinishedFeatures || false,
+    })
+
+    makeObservable(this, {
+      dealloced: observable,
     })
 
     deviceInterface.setApplication(this)
     this.noteControllerGroup = new NoteGroupController(this)
     this.iconsController = new IconsController()
+
+    this.onVisibilityChange = () => {
+      const visible = document.visibilityState === 'visible'
+      const event = visible ? WebAppEvent.WindowDidFocus : WebAppEvent.WindowDidBlur
+      this.notifyWebEvent(event)
+    }
+
+    if (!isDesktopApplication()) {
+      document.addEventListener('visibilitychange', this.onVisibilityChange)
+    }
   }
 
   override deinit(mode: DeinitMode, source: DeinitSource): void {
@@ -91,6 +106,9 @@ export class WebApplication extends SNApplication {
       ;(this.noteControllerGroup as unknown) = undefined
 
       this.webEventObservers.length = 0
+
+      document.removeEventListener('visibilitychange', this.onVisibilityChange)
+      ;(this.onVisibilityChange as unknown) = undefined
     } catch (error) {
       console.error('Error while deiniting application', error)
     }
@@ -102,19 +120,28 @@ export class WebApplication extends SNApplication {
 
   public addWebEventObserver(observer: WebEventObserver): () => void {
     this.webEventObservers.push(observer)
+
     return () => {
       removeFromArray(this.webEventObservers, observer)
     }
   }
 
-  public notifyWebEvent(event: WebAppEvent): void {
+  public notifyWebEvent(event: WebAppEvent, data?: unknown): void {
     for (const observer of this.webEventObservers) {
-      observer(event)
+      observer(event, data)
     }
   }
 
-  public getAppState(): AppState {
-    return this.webServices.appState
+  publishPanelDidResizeEvent(name: string, collapsed: boolean) {
+    const data: PanelResizedData = {
+      panel: name,
+      collapsed: collapsed,
+    }
+    this.notifyWebEvent(WebAppEvent.PanelResized, data)
+  }
+
+  public getViewControllerManager(): ViewControllerManager {
+    return this.webServices.viewControllerManager
   }
 
   public getDesktopService(): DesktopManager | undefined {
@@ -160,4 +187,23 @@ export class WebApplication extends SNApplication {
 
     return this.user.signOut()
   }
+
+  isGlobalSpellcheckEnabled(): boolean {
+    return this.getPreference(PrefKey.EditorSpellcheck, true)
+  }
+
+  public getItemTags(item: DecryptedItemInterface) {
+    return this.items.itemsReferencingItem(item).filter((ref) => {
+      return ref.content_type === ContentType.Tag
+    }) as SNTag[]
+  }
+
+  public get version(): string {
+    return (this.deviceInterface as WebOrDesktopDevice).appVersion
+  }
+
+  async toggleGlobalSpellcheck() {
+    const currentValue = this.isGlobalSpellcheckEnabled()
+    return this.setPreference(PrefKey.EditorSpellcheck, !currentValue)
+  }
 }