feat: Editing large notes (greater than 1.5MB) will result in more optimized syncing, in which changes are saved locally immediately, but sync with the server less frequently (roughly every 30 seconds rather than after every change).

packages/icons/src/Icons/index.ts

@@ -43,6 +43,7 @@ import ChevronUpIcon from './ic-chevron-up.svg'
 import CircleIcon from './circle-55.svg'
 import ClearCircleFilledIcon from './ic-clear-circle-filled.svg'
 import CloseCircleFilledIcon from './ic-close-circle-filled.svg'
+import ClockIcon from './ic-clock.svg'
 import CloseIcon from './ic-close.svg'
 import CloudOffIcon from './ic-cloud-off.svg'
 import CodeIcon from './ic-code.svg'
@@ -263,6 +264,7 @@ export {
   CircleIcon,
   ClearCircleFilledIcon,
   CloseCircleFilledIcon,
+  ClockIcon,
   CloseIcon,
   CloudOffIcon,
   CodeIcon,

packages/models/src/Domain/Utilities/Icon/IconType.ts

@@ -37,6 +37,7 @@ export type IconType =
   | 'chevron-right'
   | 'chevron-up'
   | 'clear-circle-filled'
+  | 'clock'
   | 'close'
   | 'cloud-off'
   | 'code-2'

packages/services/src/Domain/Event/WebAppEvent.ts

@@ -1,6 +1,6 @@
 export enum WebAppEvent {
   NewUpdateAvailable = 'NewUpdateAvailable',
-  EditorFocused = 'EditorFocused',
+  EditorDidFocus = 'EditorDidFocus',
   BeganBackupDownload = 'BeganBackupDownload',
   EndedBackupDownload = 'EndedBackupDownload',
   PanelResized = 'PanelResized',

packages/services/src/Domain/Sync/SyncMode.ts

@@ -11,4 +11,5 @@ export enum SyncMode {
    * all data to see if user has an items key, and if not, only then create a new one.
    */
   DownloadFirst = 'DownloadFirst',
+  LocalOnly = 'LocalOnly',
 }

packages/snjs/lib/Services/Sync/SyncService.ts

@@ -896,6 +896,12 @@ export class SyncService
 
     const { items, beginDate, frozenDirtyIndex, neverSyncedDeleted } = await this.prepareForSync(options)
 
+    if (options.mode === SyncMode.LocalOnly) {
+      this.logger.debug('Syncing local only, skipping remote sync request')
+      releaseLock()
+      return
+    }
+
     const inTimeResolveQueue = this.getPendingRequestsMadeInTimeToPiggyBackOnCurrentRequest()
 
     if (!shouldExecuteSync) {

packages/web/src/javascripts/Application/VisibilityObserver.ts

@@ -11,6 +11,7 @@ export class VisibilityObserver {
      */
     document.addEventListener('visibilitychange', this.onVisibilityChange)
     window.addEventListener('focus', this.onFocusEvent, false)
+    window.addEventListener('blur', this.onBlurEvent, false)
   }
 
   onVisibilityChange = () => {
@@ -23,6 +24,10 @@ export class VisibilityObserver {
     this.notifyEvent(WebAppEvent.WindowDidFocus)
   }
 
+  onBlurEvent = () => {
+    this.notifyEvent(WebAppEvent.WindowDidBlur)
+  }
+
   private notifyEvent(event: WebAppEvent): void {
     if (this.raceTimeout) {
       clearTimeout(this.raceTimeout)
@@ -35,6 +40,7 @@ export class VisibilityObserver {
   deinit(): void {
     document.removeEventListener('visibilitychange', this.onVisibilityChange)
     window.removeEventListener('focus', this.onFocusEvent)
+    window.removeEventListener('blur', this.onBlurEvent)
     ;(this.onEvent as unknown) = undefined
   }
 }

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -168,7 +168,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
 
   useEffect(() => {
     const removeObserver = application.addWebEventObserver(async (eventName) => {
-      if (eventName === WebAppEvent.WindowDidFocus) {
+      if (eventName === WebAppEvent.WindowDidFocus || eventName === WebAppEvent.WindowDidBlur) {
         if (!(await application.protections.isLocked())) {
           application.sync.sync().catch(console.error)
         }

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx

@@ -11,10 +11,11 @@ import { NoteType, noteTypeForEditorIdentifier } from '@standardnotes/snjs'
 
 type Props = {
   noteViewController?: NoteViewController
+  onClick?: () => void
   onClickPreprocessing?: () => Promise<void>
 }
 
-const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onClickPreprocessing }: Props) => {
+const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onClick, onClickPreprocessing }: Props) => {
   const application = useApplication()
 
   const note = application.notesController.firstSelectedNote
@@ -48,7 +49,10 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
       await onClickPreprocessing()
     }
     setIsOpen(willMenuOpen)
-  }, [onClickPreprocessing, isOpen])
+    if (onClick) {
+      onClick()
+    }
+  }, [isOpen, onClickPreprocessing, onClick])
 
   useEffect(() => {
     return application.keyboardService.addCommandHandler({

packages/web/src/javascripts/Components/Footer/Footer.tsx

@@ -70,7 +70,7 @@ class Footer extends AbstractComponent<Props, State> {
         case WebAppEvent.NewUpdateAvailable:
           this.onNewUpdateAvailable()
           break
-        case WebAppEvent.EditorFocused:
+        case WebAppEvent.EditorDidFocus:
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           if ((data as any).eventSource === EditorEventSource.UserInteraction) {
             this.closeAccountMenu()

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -84,6 +84,7 @@ export const IconNameToSvgMapping = {
   bold: icons.BoldIcon,
   camera: icons.CameraIcon,
   check: icons.CheckIcon,
+  clock: icons.ClockIcon,
   close: icons.CloseIcon,
   code: icons.CodeIcon,
   comment: icons.FeedbackIcon,

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx

@@ -7,10 +7,11 @@ import LinkedItemsPanel from './LinkedItemsPanel'
 
 type Props = {
   linkingController: LinkingController
+  onClick?: () => void
   onClickPreprocessing?: () => Promise<void>
 }
 
-const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) => {
+const LinkedItemsButton = ({ linkingController, onClick, onClickPreprocessing }: Props) => {
   const { activeItem, isLinkingPanelOpen, setIsLinkingPanelOpen } = linkingController
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -20,7 +21,10 @@ const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) =
       await onClickPreprocessing()
     }
     setIsLinkingPanelOpen(willMenuOpen)
-  }, [isLinkingPanelOpen, onClickPreprocessing, setIsLinkingPanelOpen])
+    if (onClick) {
+      onClick()
+    }
+  }, [isLinkingPanelOpen, onClick, onClickPreprocessing, setIsLinkingPanelOpen])
 
   if (!activeItem) {
     return null

packages/web/src/javascripts/Components/NoteView/Controller/EditorSaveTimeoutDebounce.ts

@@ -1,5 +1,8 @@
+import { MILLISECONDS_IN_A_SECOND } from '@/Constants/Constants'
+
 export const EditorSaveTimeoutDebounce = {
   Desktop: 350,
   ImmediateChange: 100,
   NativeMobileWeb: 700,
+  LargeNote: 60 * MILLISECONDS_IN_A_SECOND,
 }

packages/web/src/javascripts/Components/NoteView/Controller/ItemGroupController.ts

@@ -104,6 +104,9 @@ export class ItemGroupController {
     controller: NoteViewController | FileViewController,
     { notify = true }: { notify: boolean } = { notify: true },
   ): void {
+    if (controller instanceof NoteViewController) {
+      controller.syncOnlyIfLargeNote()
+    }
     controller.deinit()
 
     removeFromArray(this.itemControllers, controller)

packages/web/src/javascripts/Components/NoteView/Controller/NoteViewController.spec.ts

@@ -28,6 +28,9 @@ describe('note view controller', () => {
         createTemplateItem: jest.fn().mockReturnValue({} as SNNote),
       } as unknown as jest.Mocked<ItemManagerInterface>,
       mutator: {} as jest.Mocked<MutatorClientInterface>,
+      sessions: {
+        isSignedIn: jest.fn().mockReturnValue(true),
+      },
     } as unknown as jest.Mocked<WebApplication>
 
     application.isNativeMobileWeb = jest.fn().mockReturnValue(false)

packages/web/src/javascripts/Components/NoteView/Controller/NoteViewController.ts

@@ -25,6 +25,7 @@ import { TemplateNoteViewControllerOptions } from './TemplateNoteViewControllerO
 import { log, LoggingDomain } from '@/Logging'
 import { NoteSaveFunctionParams, NoteSyncController } from '../../../Controllers/NoteSyncController'
 import { IsNativeMobileWeb } from '@standardnotes/ui-services'
+import { NoteStatus } from '../NoteStatusIndicator'
 
 export type EditorValues = {
   title: string
@@ -219,4 +220,28 @@ export class NoteViewController implements ItemViewControllerInterface {
 
     await this.syncController.saveAndAwaitLocalPropagation(params)
   }
+
+  public get syncStatus(): NoteStatus | undefined {
+    return this.syncController.status
+  }
+
+  public showSavingStatus(): void {
+    this.syncController.showSavingStatus()
+  }
+
+  public showAllChangesSavedStatus(): void {
+    this.syncController.showAllChangesSavedStatus()
+  }
+
+  public showErrorSyncStatus(error?: NoteStatus): void {
+    this.syncController.showErrorStatus(error)
+  }
+
+  public syncNow(): void {
+    this.sync.sync().catch(console.error)
+  }
+
+  public syncOnlyIfLargeNote(): void {
+    this.syncController.syncOnlyIfLargeNote()
+  }
 }