feat: add line height & font size settings for plaintext editor (#1700)

packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx

@@ -8,6 +8,7 @@ import Defaults from './Defaults'
 import LabsPane from './Labs/Labs'
 import Advanced from '@/Components/Preferences/Panes/General/Advanced/AdvancedSection'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
+import PlaintextDefaults from './PlaintextDefaults'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -17,8 +18,9 @@ type Props = {
 
 const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
   <PreferencesPane>
-    <Tools application={application} />
+    <PlaintextDefaults application={application} />
     <Defaults application={application} />
+    <Tools application={application} />
     <LabsPane application={application} />
     <Advanced
       application={application}

packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx

@@ -0,0 +1,108 @@
+import { WebApplication } from '@/Application/Application'
+import Dropdown from '@/Components/Dropdown/Dropdown'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import Switch from '@/Components/Switch/Switch'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { EditorFontSize, EditorLineHeight, PrefKey } from '@standardnotes/snjs'
+import { useMemo, useState } from 'react'
+import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  application: WebApplication
+}
+
+const PlaintextDefaults = ({ application }: Props) => {
+  const [monospaceFont, setMonospaceFont] = useState(() =>
+    application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]),
+  )
+
+  const toggleMonospaceFont = () => {
+    setMonospaceFont(!monospaceFont)
+    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
+  }
+
+  const [lineHeight, setLineHeight] = useState(() =>
+    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
+  )
+
+  const handleLineHeightChange = (value: string) => {
+    setLineHeight(value as EditorLineHeight)
+    application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
+  }
+
+  const lineHeightDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorLineHeight).map((lineHeight) => ({
+        label: lineHeight,
+        value: lineHeight,
+      })),
+    [],
+  )
+
+  const [fontSize, setFontSize] = useState(() =>
+    application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
+  )
+
+  const handleFontSizeChange = (value: string) => {
+    setFontSize(value as EditorFontSize)
+    application.setPreference(PrefKey.EditorFontSize, value as EditorFontSize)
+  }
+
+  const fontSizeDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorFontSize).map((fontSize) => ({
+        label: fontSize,
+        value: fontSize,
+      })),
+    [],
+  )
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Plaintext Note Defaults</Title>
+        <div>
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Monospace Font</Subtitle>
+              <Text>Toggles the font style in plaintext notes</Text>
+            </div>
+            <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
+          </div>
+          <HorizontalSeparator classes="my-4" />
+          <div>
+            <Subtitle>Line height</Subtitle>
+            <Text>Sets the line height (leading) in plaintext notes</Text>
+            <div className="mt-2">
+              <Dropdown
+                id="def-line-height"
+                label="Select the line height for plaintext notes"
+                items={lineHeightDropdownOptions}
+                value={lineHeight}
+                onChange={handleLineHeightChange}
+              />
+            </div>
+          </div>
+          <HorizontalSeparator classes="my-4" />
+          <div>
+            <Subtitle>Font size</Subtitle>
+            <Text>Sets the font size in plaintext notes</Text>
+            <div className="mt-2">
+              <Dropdown
+                id="def-font-size"
+                label="Select the font size for plaintext notes"
+                items={fontSizeDropdownOptions}
+                value={fontSize}
+                onChange={handleFontSizeChange}
+              />
+            </div>
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default PlaintextDefaults

packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx

@@ -1,4 +1,3 @@
-import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/Application/Application'
@@ -14,18 +13,10 @@ type Props = {
 }
 
 const Tools: FunctionComponent<Props> = ({ application }: Props) => {
-  const [monospaceFont, setMonospaceFont] = useState(() =>
-    application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]),
-  )
   const [marginResizers, setMarginResizers] = useState(() =>
     application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]),
   )
 
-  const toggleMonospaceFont = () => {
-    setMonospaceFont(!monospaceFont)
-    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
-  }
-
   const toggleMarginResizers = () => {
     setMarginResizers(!marginResizers)
     application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
@@ -36,14 +27,6 @@ const Tools: FunctionComponent<Props> = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Tools</Title>
         <div>
-          <div className="flex items-center justify-between">
-            <div className="flex flex-col">
-              <Subtitle>Monospace Font</Subtitle>
-              <Text>Toggles the font style in the Plain Text editor.</Text>
-            </div>
-            <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
-          </div>
-          <HorizontalSeparator classes="my-4" />
           <div className="flex items-center justify-between">
             <div className="flex flex-col">
               <Subtitle>Margin Resizers</Subtitle>