feat: Switched editor appearance preferences to be local instead of s…

…ynced (#2870)

packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts

@@ -11,12 +11,12 @@ export const PrefDefaults = {
   [PrefKey.NotesPanelWidth]: 350,
   [PrefKey.EditorWidth]: null,
   [PrefKey.EditorLeft]: null,
-  [PrefKey.EditorMonospaceEnabled]: false,
+  [PrefKey.DEPRECATED_EditorMonospaceEnabled]: false,
   [PrefKey.EditorSpellcheck]: true,
   [PrefKey.EditorResizersEnabled]: false,
-  [PrefKey.EditorLineHeight]: EditorLineHeight.Normal,
-  [PrefKey.EditorLineWidth]: EditorLineWidth.FullWidth,
-  [PrefKey.EditorFontSize]: EditorFontSize.Normal,
+  [PrefKey.DEPRECATED_EditorLineHeight]: EditorLineHeight.Normal,
+  [PrefKey.DEPRECATED_EditorLineWidth]: EditorLineWidth.FullWidth,
+  [PrefKey.DEPRECATED_EditorFontSize]: EditorFontSize.Normal,
   [PrefKey.SortNotesBy]: CollectionSort.CreatedAt,
   [PrefKey.SortNotesReverse]: false,
   [PrefKey.NotesShowArchived]: false,

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -12,12 +12,8 @@ export enum PrefKey {
   NotesPanelWidth = 'notesPanelWidth',
   EditorWidth = 'editorWidth',
   EditorLeft = 'editorLeft',
-  EditorMonospaceEnabled = 'monospaceFont',
   EditorSpellcheck = 'spellcheck',
   EditorResizersEnabled = 'marginResizersEnabled',
-  EditorLineHeight = 'editorLineHeight',
-  EditorLineWidth = 'editorLineWidth',
-  EditorFontSize = 'editorFontSize',
   SortNotesBy = 'sortBy',
   SortNotesReverse = 'sortReverse',
   NotesShowArchived = 'showArchived',
@@ -53,14 +49,17 @@ export enum PrefKey {
   DEPRECATED_UseTranslucentUI = 'useTranslucentUI',
   DEPRECATED_AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
   DEPRECATED_AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
+  DEPRECATED_EditorMonospaceEnabled = 'monospaceFont',
+  DEPRECATED_EditorLineHeight = 'editorLineHeight',
+  DEPRECATED_EditorLineWidth = 'editorLineWidth',
+  DEPRECATED_EditorFontSize = 'editorFontSize',
 }
 
 export type PrefValue = {
   [PrefKey.TagsPanelWidth]: number
   [PrefKey.NotesPanelWidth]: number
   [PrefKey.EditorWidth]: number | null
   [PrefKey.EditorLeft]: number | null
-  [PrefKey.EditorMonospaceEnabled]: boolean
   [PrefKey.EditorSpellcheck]: boolean
   [PrefKey.EditorResizersEnabled]: boolean
   [PrefKey.SortNotesBy]: CollectionSortProperty
@@ -81,9 +80,10 @@ export type PrefValue = {
   [PrefKey.NoteAddToParentFolders]: boolean
   [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
   [PrefKey.CustomNoteTitleFormat]: string
-  [PrefKey.EditorLineHeight]: EditorLineHeight
-  [PrefKey.EditorLineWidth]: EditorLineWidth
-  [PrefKey.EditorFontSize]: EditorFontSize
+  [PrefKey.DEPRECATED_EditorMonospaceEnabled]: boolean
+  [PrefKey.DEPRECATED_EditorLineHeight]: EditorLineHeight
+  [PrefKey.DEPRECATED_EditorLineWidth]: EditorLineWidth
+  [PrefKey.DEPRECATED_EditorFontSize]: EditorFontSize
   [PrefKey.UpdateSavingStatusIndicator]: boolean
   [PrefKey.DefaultEditorIdentifier]: string
   [PrefKey.MomentsDefaultTagUuid]: string | undefined

packages/services/src/Domain/Preferences/LocalPrefKey.ts

@@ -1,9 +1,16 @@
+import { EditorFontSize, EditorLineHeight, EditorLineWidth } from '@standardnotes/models'
+
 export enum LocalPrefKey {
   ActiveThemes = 'activeThemes',
   UseSystemColorScheme = 'useSystemColorScheme',
   UseTranslucentUI = 'useTranslucentUI',
   AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
   AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
+
+  EditorMonospaceEnabled = 'monospaceFont',
+  EditorLineHeight = 'editorLineHeight',
+  EditorLineWidth = 'editorLineWidth',
+  EditorFontSize = 'editorFontSize',
 }
 
 export type LocalPrefValue = {
@@ -12,4 +19,9 @@ export type LocalPrefValue = {
   [LocalPrefKey.UseTranslucentUI]: boolean
   [LocalPrefKey.AutoLightThemeIdentifier]: string
   [LocalPrefKey.AutoDarkThemeIdentifier]: string
+
+  [LocalPrefKey.EditorMonospaceEnabled]: boolean
+  [LocalPrefKey.EditorLineHeight]: EditorLineHeight
+  [LocalPrefKey.EditorLineWidth]: EditorLineWidth
+  [LocalPrefKey.EditorFontSize]: EditorFontSize
 }

packages/snjs/lib/Migrations/Versions/2_209_0.ts

@@ -0,0 +1,45 @@
+import { LocalPrefKey, ApplicationStage } from '@standardnotes/services'
+import { Migration } from '@Lib/Migrations/Migration'
+import { PrefDefaults, PrefKey } from '@standardnotes/models'
+
+export class Migration2_209_0 extends Migration {
+  static override version(): string {
+    return '2.209.0'
+  }
+
+  protected registerStageHandlers(): void {
+    this.registerStageHandler(ApplicationStage.FullSyncCompleted_13, async () => {
+      await this.migrateSyncedPreferencesToLocal()
+
+      this.markDone()
+    })
+  }
+
+  private async migrateSyncedPreferencesToLocal(): Promise<void> {
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.EditorMonospaceEnabled,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_EditorMonospaceEnabled,
+        PrefDefaults[LocalPrefKey.EditorMonospaceEnabled],
+      ),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.EditorFontSize,
+      this.services.preferences.getValue(PrefKey.DEPRECATED_EditorFontSize, PrefDefaults[LocalPrefKey.EditorFontSize]),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.EditorLineWidth,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_EditorLineWidth,
+        PrefDefaults[LocalPrefKey.EditorLineWidth],
+      ),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.EditorLineHeight,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_EditorLineHeight,
+        PrefDefaults[LocalPrefKey.EditorLineHeight],
+      ),
+    )
+  }
+}

packages/snjs/lib/Migrations/Versions/index.ts

@@ -7,6 +7,7 @@ import { Migration2_167_6 } from './2_167_6'
 import { Migration2_168_6 } from './2_168_6'
 import { Migration2_202_1 } from './2_202_1'
 import { Migration2_208_0 } from './2_208_0'
+import { Migration2_209_0 } from './2_209_0'
 
 export const MigrationClasses = [
   Migration2_0_15,
@@ -18,6 +19,7 @@ export const MigrationClasses = [
   Migration2_168_6,
   Migration2_202_1,
   Migration2_208_0,
+  Migration2_209_0,
 ]
 
 export {
@@ -30,4 +32,5 @@ export {
   Migration2_168_6,
   Migration2_202_1,
   Migration2_208_0,
+  Migration2_209_0,
 }

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

@@ -10,9 +10,9 @@ import {
   IframeComponentFeatureDescription,
   NoteMutator,
   NoteType,
-  PrefKey,
   SNNote,
   ContentType,
+  LocalPrefKey,
 } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
@@ -131,7 +131,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
       setCurrentFeature(application.componentManager.editorForNote(note))
 
       if (uiFeature.featureIdentifier === NativeFeatureIdentifier.TYPES.PlainEditor) {
-        reloadFont(application.getPreference(PrefKey.EditorMonospaceEnabled))
+        reloadFont(application.preferences.getLocalValue(LocalPrefKey.EditorMonospaceEnabled))
       }
     },
     [application],

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

@@ -1,5 +1,5 @@
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
-import { classNames, EditorLineWidth, PrefKey, SNNote, PrefDefaults } from '@standardnotes/snjs'
+import { classNames, EditorLineWidth, SNNote, PrefDefaults, LocalPrefKey } from '@standardnotes/snjs'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import Button from '../Button/Button'
 import Modal, { ModalAction } from '../Modal/Modal'
@@ -160,14 +160,14 @@ const EditorWidthSelectionModalWrapper = () => {
 
   const lineWidth = note
     ? notesController.getEditorWidthForNote(note)
-    : application.getPreference(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth])
+    : application.preferences.getLocalValue(LocalPrefKey.EditorLineWidth, PrefDefaults[LocalPrefKey.EditorLineWidth])
 
   const setLineWidth = useCallback(
     (lineWidth: EditorLineWidth, setGlobally: boolean) => {
       if (note && !setGlobally) {
         notesController.setNoteEditorWidth(note, lineWidth).catch(console.error)
       } else {
-        application.setPreference(PrefKey.EditorLineWidth, lineWidth).catch(console.error)
+        application.preferences.setLocalValue(LocalPrefKey.EditorLineWidth, lineWidth)
       }
     },
     [application, note, notesController],

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

@@ -27,6 +27,7 @@ import {
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
   SNNote,
   VaultUserServiceEvent,
+  LocalPrefKey,
 } from '@standardnotes/snjs'
 import { confirmDialog, DELETE_NOTE_KEYBOARD_COMMAND, KeyboardKey } from '@standardnotes/ui-services'
 import { ChangeEventHandler, createRef, CSSProperties, FocusEvent, KeyboardEventHandler, RefObject } from 'react'
@@ -123,7 +124,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
       availableStackComponents: [],
       editorStateDidLoad: false,
       editorTitle: '',
-      editorLineWidth: PrefDefaults[PrefKey.EditorLineWidth],
+      editorLineWidth: PrefDefaults[LocalPrefKey.EditorLineWidth],
       isDesktop: isDesktopApplication(),
       noteStatus: undefined,
       noteLocked: this.controller.item.locked,
@@ -371,6 +372,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
     }
 
     switch (eventName) {
+      case ApplicationEvent.LocalPreferencesChanged:
       case ApplicationEvent.PreferencesChanged:
         void this.reloadPreferences()
         void this.reloadStackComponents()
@@ -673,9 +675,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
 
   async reloadPreferences() {
     log(LoggingDomain.NoteView, 'Reload preferences')
-    const monospaceFont = this.application.getPreference(
-      PrefKey.EditorMonospaceEnabled,
-      PrefDefaults[PrefKey.EditorMonospaceEnabled],
+    const monospaceFont = this.application.preferences.getLocalValue(
+      LocalPrefKey.EditorMonospaceEnabled,
+      PrefDefaults[LocalPrefKey.EditorMonospaceEnabled],
     )
 
     const updateSavingIndicator = this.application.getPreference(

packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx

@@ -11,9 +11,9 @@ import {
   EditorFontSize,
   EditorLineHeight,
   isPayloadSourceRetrieved,
-  PrefKey,
   WebAppEvent,
   PrefDefaults,
+  LocalPrefKey,
 } from '@standardnotes/snjs'
 import { isIOS, TAB_COMMAND } from '@standardnotes/ui-services'
 import {
@@ -174,8 +174,14 @@ export const PlainEditor = forwardRef<PlainEditorInterface, Props>(
     }, [controller, focusEditor])
 
     const reloadPreferences = useCallback(() => {
-      const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
-      const fontSize = application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize])
+      const lineHeight = application.preferences.getLocalValue(
+        LocalPrefKey.EditorLineHeight,
+        PrefDefaults[LocalPrefKey.EditorLineHeight],
+      )
+      const fontSize = application.preferences.getLocalValue(
+        LocalPrefKey.EditorFontSize,
+        PrefDefaults[LocalPrefKey.EditorFontSize],
+      )
 
       setLineHeight(lineHeight)
       setFontSize(fontSize)

packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx

@@ -1,9 +1,9 @@
 import {
   ContentType,
   EditorLineHeightValues,
+  LocalPrefKey,
   NoteContent,
   NoteType,
-  PrefKey,
   SNNote,
   classNames,
   isUIFeatureAnIframeFeature,
@@ -17,7 +17,7 @@ import { BlocksEditor } from '../SuperEditor/BlocksEditor'
 import { BlocksEditorComposer } from '../SuperEditor/BlocksEditorComposer'
 import { useLinkingController } from '@/Controllers/LinkingControllerProvider'
 import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
-import usePreference from '@/Hooks/usePreference'
+import { useLocalPreference } from '@/Hooks/usePreference'
 import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
 import { getScrollParent } from '@/Utils'
 
@@ -132,8 +132,8 @@ export const ReadonlyNoteContent = ({
     [note.noteType, onScroll, setScroller],
   )
 
-  const lineHeight = usePreference(PrefKey.EditorLineHeight)
-  const fontSize = usePreference(PrefKey.EditorFontSize)
+  const [lineHeight] = useLocalPreference(LocalPrefKey.EditorLineHeight)
+  const [fontSize] = useLocalPreference(LocalPrefKey.EditorFontSize)
   const responsiveFontSize = useResponsiveEditorFontSize(fontSize, false)
 
   return (

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -3,32 +3,23 @@ import Dropdown from '@/Components/Dropdown/Dropdown'
 import Icon from '@/Components/Icon/Icon'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
-import {
-  ApplicationEvent,
-  EditorFontSize,
-  EditorLineHeight,
-  EditorLineWidth,
-  PrefKey,
-  PrefDefaults,
-} from '@standardnotes/snjs'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { EditorFontSize, EditorLineHeight, EditorLineWidth, LocalPrefKey } from '@standardnotes/snjs'
+import { useCallback, useMemo } from 'react'
 import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import { CHANGE_EDITOR_WIDTH_COMMAND } from '@standardnotes/ui-services'
+import { useLocalPreference } from '../../../../Hooks/usePreference'
 
 type Props = {
   application: WebApplication
 }
 
 const EditorDefaults = ({ application }: Props) => {
-  const [lineHeight, setLineHeight] = useState(() =>
-    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
-  )
+  const [lineHeight, setLineHeight] = useLocalPreference(LocalPrefKey.EditorLineHeight)
 
   const handleLineHeightChange = (value: string) => {
     setLineHeight(value as EditorLineHeight)
-    void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
   }
 
   const lineHeightDropdownOptions = useMemo(
@@ -40,22 +31,14 @@ const EditorDefaults = ({ application }: Props) => {
     [],
   )
 
-  const [monospaceFont, setMonospaceFont] = useState(() =>
-    application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]),
-  )
-
+  const [monospaceFont, setMonospaceFont] = useLocalPreference(LocalPrefKey.EditorMonospaceEnabled)
   const toggleMonospaceFont = () => {
     setMonospaceFont(!monospaceFont)
-    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
   }
 
-  const [fontSize, setFontSize] = useState(() =>
-    application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
-  )
-
+  const [fontSize, setFontSize] = useLocalPreference(LocalPrefKey.EditorFontSize)
   const handleFontSizeChange = (value: string) => {
     setFontSize(value as EditorFontSize)
-    void application.setPreference(PrefKey.EditorFontSize, value as EditorFontSize)
   }
 
   const fontSizeDropdownOptions = useMemo(
@@ -67,20 +50,12 @@ const EditorDefaults = ({ application }: Props) => {
     [],
   )
 
-  const [editorWidth, setEditorWidth] = useState(() =>
-    application.getPreference(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth]),
-  )
+  const [editorWidth] = useLocalPreference(LocalPrefKey.EditorLineWidth)
 
   const toggleEditorWidthModal = useCallback(() => {
     application.keyboardService.triggerCommand(CHANGE_EDITOR_WIDTH_COMMAND, true)
   }, [application.keyboardService])
 
-  useEffect(() => {
-    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
-      setEditorWidth(application.getPreference(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth]))
-    })
-  }, [application])
-
   return (
     <PreferencesGroup>
       <PreferencesSegment>