feat: use line height preference in super editor (skip e2e) (#2045)

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

@@ -0,0 +1,57 @@
+import { WebApplication } from '@/Application/Application'
+import Dropdown from '@/Components/Dropdown/Dropdown'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { 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 EditorDefaults = ({ application }: Props) => {
+  const [lineHeight, setLineHeight] = useState(() =>
+    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
+  )
+
+  const handleLineHeightChange = (value: string) => {
+    setLineHeight(value as EditorLineHeight)
+    void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
+  }
+
+  const lineHeightDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorLineHeight).map((lineHeight) => ({
+        label: lineHeight,
+        value: lineHeight,
+      })),
+    [],
+  )
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Editor Defaults</Title>
+        <div>
+          <div>
+            <Subtitle>Line height</Subtitle>
+            <Text>Sets the line height (leading) in plaintext & Super 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>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default EditorDefaults

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

@@ -11,6 +11,7 @@ import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 import PlaintextDefaults from './PlaintextDefaults'
 import Persistence from './Persistence'
 import SmartViews from './SmartViews/SmartViews'
+import EditorDefaults from './EditorDefaults'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -22,6 +23,7 @@ const General: FunctionComponent<Props> = ({ viewControllerManager, application,
   <PreferencesPane>
     <Persistence application={application} />
     <PlaintextDefaults application={application} />
+    <EditorDefaults application={application} />
     <Defaults application={application} />
     <Tools application={application} />
     <SmartViews application={application} featuresController={viewControllerManager.featuresController} />

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

@@ -3,7 +3,7 @@ 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 { EditorFontSize, PrefKey } from '@standardnotes/snjs'
 import { useMemo, useState } from 'react'
 import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
@@ -23,24 +23,6 @@ const PlaintextDefaults = ({ application }: Props) => {
     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)
-    void 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]),
   )
@@ -72,20 +54,6 @@ const PlaintextDefaults = ({ application }: Props) => {
             <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>

packages/web/src/javascripts/Components/Preferences/Panes/Security/BiometricsLock.tsx

@@ -7,7 +7,7 @@ import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/P
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import Button from '@/Components/Button/Button'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   application: WebApplication

packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx

@@ -20,7 +20,7 @@ import Button from '@/Components/Button/Button'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   application: WebApplication

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { FunctionComponent, MouseEventHandler, ReactNode } from 'react'
 
 type Props = {

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -6,7 +6,7 @@ import PreferencesCanvas from './PreferencesCanvas'
 import { PreferencesProps } from './PreferencesProps'
 import { isIOS } from '@/Utils'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import { ESCAPE_COMMAND } from '@standardnotes/ui-services'