chore: make font size changes responsive to window size

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

@@ -5,7 +5,7 @@ import { log, LoggingDomain } from '@/Logging'
 import { Disposer } from '@/Types/Disposer'
 import { EditorEventSource } from '@/Types/EditorEventSource'
 import { classNames } from '@standardnotes/utils'
-import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
+import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
 import {
   ApplicationEvent,
   EditorFontSize,
@@ -38,6 +38,7 @@ export const PlainEditor = forwardRef<PlainEditorInterface, Props>(
     const [textareaUnloading, setTextareaUnloading] = useState(false)
     const [lineHeight, setLineHeight] = useState<EditorLineHeight | undefined>()
     const [fontSize, setFontSize] = useState<EditorFontSize | undefined>()
+    const responsiveFontSize = useResponsiveEditorFontSize(fontSize || EditorFontSize.Normal)
     const previousSpellcheck = usePrevious(spellcheck)
 
     const lastEditorFocusEventSource = useRef<EditorEventSource | undefined>()
@@ -262,7 +263,7 @@ export const PlainEditor = forwardRef<PlainEditorInterface, Props>(
         className={classNames(
           'editable font-editor flex-grow',
           lineHeight && `leading-${lineHeight.toLowerCase()}`,
-          fontSize && getPlaintextFontSize(fontSize),
+          responsiveFontSize,
         )}
       ></textarea>
     )

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

@@ -39,7 +39,7 @@ import { SUPER_SHOW_MARKDOWN_PREVIEW } from '@standardnotes/ui-services'
 import { SuperNoteMarkdownPreview } from './SuperNoteMarkdownPreview'
 import { ExportPlugin } from './Plugins/ExportPlugin/ExportPlugin'
 import GetMarkdownPlugin, { GetMarkdownPluginInterface } from './Plugins/GetMarkdownPlugin/GetMarkdownPlugin'
-import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
+import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
 import ReadonlyPlugin from './Plugins/ReadonlyPlugin/ReadonlyPlugin'
 import { SuperSearchContextProvider } from './Plugins/SearchPlugin/Context'
 import { SearchPlugin } from './Plugins/SearchPlugin/SearchPlugin'
@@ -162,9 +162,10 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const [lineHeight, setLineHeight] = useState<EditorLineHeight>(() =>
     application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
   )
-  const [fontSize, setFontSize] = useState<EditorFontSize | undefined>(() =>
+  const [fontSize, setFontSize] = useState<EditorFontSize>(() =>
     application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
   )
+  const responsiveFontSize = useResponsiveEditorFontSize(fontSize)
 
   const reloadPreferences = useCallback(() => {
     const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
@@ -222,7 +223,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
                 className={classNames(
                   'blocks-editor relative h-full resize-none px-4 py-4 focus:shadow-none focus:outline-none',
                   lineHeight && `leading-${lineHeight.toLowerCase()}`,
-                  fontSize ? getPlaintextFontSize(fontSize) : 'text-base',
+                  responsiveFontSize,
                 )}
                 previewLength={SuperNotePreviewCharLimit}
                 spellcheck={spellcheck}

packages/web/src/javascripts/Utils/getPlaintextFontSize.tsx

@@ -1,7 +1,7 @@
-import { isMobileScreen, isTabletScreen } from '@/Utils'
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { EditorFontSize } from '@standardnotes/snjs'
 
-export const getPlaintextFontSize = (key: EditorFontSize): string => {
+export const useResponsiveEditorFontSize = (key: EditorFontSize): string => {
   const desktopMapping: Record<EditorFontSize, string> = {
     ExtraSmall: 'text-xs',
     Small: 'text-sm',
@@ -26,9 +26,12 @@ export const getPlaintextFontSize = (key: EditorFontSize): string => {
     Large: 'text-2xl',
   }
 
-  if (isTabletScreen()) {
+  const isTabletScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  if (isTabletScreen) {
     return tabletMapping[key]
   }
 
-  return isMobileScreen() ? mobileMapping[key] : desktopMapping[key]
+  return isMobileScreen ? mobileMapping[key] : desktopMapping[key]
 }