feat: Switched editor appearance preferences to be local instead of synced (#2870)

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>

packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuperDemo.tsx

@@ -1,9 +1,9 @@
 import { BlocksEditor } from '@/Components/SuperEditor/BlocksEditor'
 import { BlocksEditorComposer } from '@/Components/SuperEditor/BlocksEditorComposer'
 import BlockPickerMenuPlugin from '@/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin'
-import usePreference from '@/Hooks/usePreference'
+import { useLocalPreference } from '@/Hooks/usePreference'
 import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
-import { EditorLineHeightValues, PrefKey, classNames } from '@standardnotes/snjs'
+import { EditorLineHeightValues, LocalPrefKey, classNames } from '@standardnotes/snjs'
 import { CSSProperties, useRef, useState } from 'react'
 import { SuperDemoInitialValue } from './SuperDemoInitialValue'
 import { UpgradePrompt } from './UpgradePrompt'
@@ -13,8 +13,8 @@ import { useAutoElementRect } from '@/Hooks/useElementRect'
 const SuperDemo = ({ hasSubscription, onClose }: { hasSubscription: boolean; onClose: () => void }) => {
   const application = useApplication()
 
-  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)
 
   const ctaRef = useRef<HTMLButtonElement>(null)

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

@@ -1,12 +1,12 @@
 import { WebApplication } from '@/Application/WebApplication'
 import {
   isPayloadSourceRetrieved,
-  PrefKey,
   NativeFeatureIdentifier,
   FeatureStatus,
   GetSuperNoteFeature,
   EditorLineHeightValues,
   WebAppEvent,
+  LocalPrefKey,
 } from '@standardnotes/snjs'
 import { CSSProperties, FocusEvent, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { BlocksEditor } from './BlocksEditor'
@@ -36,7 +36,7 @@ import ReadonlyPlugin from './Plugins/ReadonlyPlugin/ReadonlyPlugin'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
 import NotEntitledBanner from '../ComponentView/NotEntitledBanner'
 import AutoFocusPlugin from './Plugins/AutoFocusPlugin'
-import usePreference from '@/Hooks/usePreference'
+import { useLocalPreference } from '@/Hooks/usePreference'
 import BlockPickerMenuPlugin from './Plugins/BlockPickerPlugin/BlockPickerPlugin'
 import { EditorEventSource } from '@/Types/EditorEventSource'
 import { ElementIds } from '@/Constants/ElementIDs'
@@ -194,8 +194,8 @@ export const SuperEditor: FunctionComponent<Props> = ({
     return disposer
   }, [controller, controller.item.uuid])
 
-  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)
 
   const ref = useRef<HTMLDivElement>(null)

packages/web/src/javascripts/Components/SuperEditor/SuperNoteImporter.tsx

@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { EditorLineHeightValues, NoteType, PrefKey, SNNote } from '@standardnotes/snjs'
+import { EditorLineHeightValues, LocalPrefKey, NoteType, SNNote } from '@standardnotes/snjs'
 import { CSSProperties, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
 import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
@@ -8,7 +8,7 @@ import { spaceSeparatedStrings } from '@standardnotes/utils'
 import Modal, { ModalAction } from '@/Components/Modal/Modal'
 import { BlocksEditor } from './BlocksEditor'
 import { BlocksEditorComposer } from './BlocksEditorComposer'
-import usePreference from '@/Hooks/usePreference'
+import { useLocalPreference } from '@/Hooks/usePreference'
 import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
 
 const NotePreviewCharLimit = 160
@@ -125,8 +125,8 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
     [canBeConvertedAsIs, closeDialog, confirmConvert, convertAsIs],
   )
 
-  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)
 
   if (isSeamlessConvert) {

packages/web/src/javascripts/Controllers/NotesController/NotesController.ts

@@ -27,6 +27,7 @@ import {
   SyncServiceInterface,
   AlertService,
   ProtectionsClientInterface,
+  LocalPrefKey,
 } from '@standardnotes/snjs'
 import { makeObservable, observable, action, computed, runInAction } from 'mobx'
 import { AbstractViewController } from '../Abstract/AbstractViewController'
@@ -341,7 +342,10 @@ export class NotesController
   }
 
   getEditorWidthForNote(note: SNNote) {
-    return note.editorWidth ?? this.preferences.getValue(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth])
+    return (
+      note.editorWidth ??
+      this.preferences.getLocalValue(LocalPrefKey.EditorLineWidth, PrefDefaults[LocalPrefKey.EditorLineWidth])
+    )
   }
 
   async setNoteEditorWidth(note: SNNote, editorWidth: EditorLineWidth) {