feat: Switched editor appearance preferences to be local instead of synced (#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,6 +49,10 @@ 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 = {
@@ -60,7 +60,6 @@ export type PrefValue = {
   [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>

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) {