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

packages/blocks-editor/src/Editor/BlocksEditor.tsx

@@ -30,6 +30,8 @@ import FloatingTextFormatToolbarPlugin from '../Lexical/Plugins/FloatingTextForm
 import FloatingLinkEditorPlugin from '../Lexical/Plugins/FloatingLinkEditorPlugin';
 import {truncateString} from './Utils';
 import {SuperEditorContentId} from './Constants';
+import {classNames} from '@standardnotes/utils';
+import {EditorLineHeight} from '@standardnotes/snjs';
 
 type BlocksEditorProps = {
   onChange: (value: string, preview: string) => void;
@@ -38,6 +40,7 @@ type BlocksEditorProps = {
   previewLength: number;
   spellcheck?: boolean;
   ignoreFirstChange?: boolean;
+  lineHeight?: EditorLineHeight;
 };
 
 export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
@@ -47,6 +50,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
   previewLength,
   spellcheck,
   ignoreFirstChange = false,
+  lineHeight,
 }) => {
   const [didIgnoreFirstChange, setDidIgnoreFirstChange] = useState(false);
   const handleChange = useCallback(
@@ -98,7 +102,11 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
             <div className="editor" ref={onRef}>
               <ContentEditable
                 id={SuperEditorContentId}
-                className={`ContentEditable__root overflow-y-auto ${className}`}
+                className={classNames(
+                  'ContentEditable__root overflow-y-auto',
+                  lineHeight && `leading-${lineHeight.toLowerCase()}`,
+                  className,
+                )}
                 spellCheck={spellcheck}
               />
             </div>

packages/utils/src/Domain/index.ts

@@ -1,4 +1,5 @@
 export * from './Utils/Utils'
+export * from './Utils/ClassNames'
 export * from './Uuid/UuidGenerator'
 export * from './Uuid/UuidMap'
 export * from './Uuid/Utils'

packages/web/src/javascripts/Components/Button/RoundIconButton.tsx

@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef, MouseEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   onClick: () => void

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

@@ -20,7 +20,7 @@ import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { ChallengeModalValues } from './ChallengeModalValues'
 import { InputValue } from './InputValue'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   application: WebApplication

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

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ComponentPropsWithoutRef } from 'react'
 import Icon from '../Icon/Icon'
 

packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx

@@ -6,7 +6,7 @@ import { CalendarMonth } from './CalendarMonth'
 import { CalendarMonths } from './Constants'
 import { insertMonths, insertMonthsWithTarget } from './CalendarUtilts'
 import { InfiniteScrollerInterface, InfinteScroller } from '../InfiniteScroller/InfiniteScroller'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { LoggingDomain, log } from '@/Logging'
 import { usePrevious } from './usePrevious'
 import { isMobileScreen } from '@/Utils'

packages/web/src/javascripts/Components/ContentListView/ContentList.tsx

@@ -11,7 +11,7 @@ import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { ElementIds } from '@/Constants/ElementIDs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ContentType, SNTag } from '@standardnotes/snjs'
 
 type Props = {

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

@@ -30,7 +30,7 @@ import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import SearchBar from '../SearchBar/SearchBar'
 import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useFileDragNDrop } from '../FileDragNDropProvider/FileDragNDropProvider'
 import { LinkingController } from '@/Controllers/LinkingController'

packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx

@@ -9,7 +9,7 @@ import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'
 import { useApplication } from '../ApplicationView/ApplicationProvider'

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -1,7 +1,7 @@
 import { WebApplication } from '@/Application/Application'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import Icon from '../../Icon/Icon'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import Popover from '@/Components/Popover/Popover'
 import DisplayOptionsMenu from './DisplayOptionsMenu'
 import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -20,7 +20,7 @@ import { DisplayOptionsMenuProps } from './DisplayOptionsMenuProps'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import NewNotePreferences from './NewNotePreferences'
 import { PreferenceMode } from './PreferenceMode'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscriptionBanner'
 
 const DailyEntryModeEnabled = true

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -9,7 +9,7 @@ import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
 import { PreferenceMode } from './PreferenceMode'
 import dayjs from 'dayjs'
 import { EditorOption, getDropdownItemsForAllEditors } from '@/Utils/DropdownItemsForEditors'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { NoteTitleFormatOptions } from './NoteTitleFormatOptions'
 
 const PrefChangeDebounceTimeInMs = 25

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -13,7 +13,7 @@ import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
 import ListItemNotePreviewText from './ListItemNotePreviewText'
 import { ListItemTitle } from './ListItemTitle'
 import { log, LoggingDomain } from '@/Logging'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getIconAndTintForNoteType } from '@/Utils/Items/Icons/getIconAndTintForNoteType'
 
 const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({

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

@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { isHandlingFileDrag } from '@/Utils/DragTypeCheck'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import { FileItem } from '@standardnotes/snjs'

packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useRef } from 'react'
 import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
 import Icon from '../Icon/Icon'

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useRef } from 'react'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import { VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { IconNameToSvgMapping } from './IconNameToSvgMapping'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { LexicalIconName, LexicalIconNameToSvgMapping } from './LexicalIcons'
 
 type Props = {

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { EmojiString, Platform, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { FunctionComponent, useMemo, useRef, useState } from 'react'
 import Dropdown from '../Dropdown/Dropdown'

packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx

@@ -11,7 +11,7 @@ import {
 import { Disclosure, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { observer } from 'mobx-react-lite'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import LinkedItemSearchResults from './LinkedItemSearchResults'
 import { LinkingController } from '@/Controllers/LinkingController'

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx

@@ -1,5 +1,5 @@
 import { LinkingController } from '@/Controllers/LinkingController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
 import { KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx

@@ -5,7 +5,7 @@ import LinkedItemBubble from './LinkedItemBubble'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ContentType } from '@standardnotes/snjs'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { ItemLink } from '@/Utils/Items/Search/ItemLink'

packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx

@@ -1,5 +1,5 @@
 import { splitQueryInString } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getTitleForLinkedTag } from '@/Utils/Items/Display/getTitleForLinkedTag'
 import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import Icon from '../Icon/Icon'
 
 type Props = {

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -2,7 +2,7 @@ import { FeatureName } from '@/Controllers/FeatureName'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, useEffect, useRef, useState } from 'react'

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx

@@ -1,6 +1,6 @@
 import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'

packages/web/src/javascripts/Components/Menu/MenuItem.tsx

@@ -6,7 +6,7 @@ import { IconType } from '@standardnotes/snjs'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { MenuItemType } from './MenuItemType'
 import RadioIndicator from '../Radio/RadioIndicator'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 

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

@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/Application'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import Button from '../Button/Button'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'

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

@@ -1,6 +1,6 @@
 import { ElementIds } from '@/Constants/ElementIDs'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ReactNode, useCallback, useState } from 'react'
 import { IconType, PrefKey } from '@standardnotes/snjs'
 import Icon from '../Icon/Icon'

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

@@ -10,7 +10,7 @@ import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { StringDeleteNote, STRING_DELETE_LOCKED_ATTEMPT, STRING_DELETE_PLACEHOLDER_ATTEMPT } from '@/Constants/Strings'
 import { log, LoggingDomain } from '@/Logging'
 import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import {
   ApplicationEvent,
   ComponentArea,

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

@@ -5,7 +5,7 @@ import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { log, LoggingDomain } from '@/Logging'
 import { Disposer } from '@/Types/Disposer'
 import { EditorEventSource } from '@/Types/EditorEventSource'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
 import {
   ApplicationEvent,

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ClassNames.ts

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 export const PopoverClassNames = classNames(
   'z-dropdown-menu w-full',

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

@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
-import { isPayloadSourceRetrieved } from '@standardnotes/snjs'
+import { ApplicationEvent, EditorLineHeight, isPayloadSourceRetrieved, PrefKey } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useRef } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
 import { ItemSelectionPlugin } from './Plugins/ItemSelectionPlugin/ItemSelectionPlugin'
 import { FileNode } from './Plugins/EncryptedFilePlugin/Nodes/FileNode'
@@ -22,6 +22,7 @@ import {
   ChangeEditorFunction,
 } from './Plugins/ChangeContentCallback/ChangeContentCallback'
 import PasswordPlugin from './Plugins/PasswordPlugin/PasswordPlugin'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
 
 const NotePreviewCharLimit = 160
 
@@ -44,6 +45,8 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const changeEditorFunction = useRef<ChangeEditorFunction>()
   const ignoreNextChange = useRef(false)
 
+  const [lineHeight, setLineHeight] = useState<EditorLineHeight>(PrefDefaults[PrefKey.EditorLineHeight])
+
   const handleChange = useCallback(
     async (value: string, preview: string) => {
       if (ignoreNextChange.current === true) {
@@ -90,6 +93,20 @@ export const SuperEditor: FunctionComponent<Props> = ({
     return disposer
   }, [controller, controller.item.uuid])
 
+  const reloadPreferences = useCallback(() => {
+    const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
+
+    setLineHeight(lineHeight)
+  }, [application])
+
+  useEffect(() => {
+    reloadPreferences()
+
+    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+      reloadPreferences()
+    })
+  }, [reloadPreferences, application])
+
   return (
     <div className="relative h-full w-full">
       <ErrorBoundary>
@@ -106,6 +123,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
                 className="relative h-full resize-none px-6 py-4 text-base focus:shadow-none focus:outline-none"
                 previewLength={NotePreviewCharLimit}
                 spellcheck={spellcheck}
+                lineHeight={lineHeight}
               >
                 <ItemSelectionPlugin currentNote={note.current} />
                 <FilePlugin />

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

@@ -105,7 +105,7 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
               <BlocksEditor
                 onChange={handleChange}
                 ignoreFirstChange={false}
-                className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
+                className="relative resize-none text-base focus:shadow-none focus:outline-none"
                 previewLength={NotePreviewCharLimit}
                 spellcheck={note.spellcheck}
               >

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

@@ -24,7 +24,7 @@ import { getNoteBlob, getNoteFileName } from '@/Utils/NoteExportUtils'
 import { shareSelectedNotes } from '@/NativeMobileWeb/ShareSelectedNotes'
 import { downloadSelectedNotesOnAndroid } from '@/NativeMobileWeb/DownloadSelectedNotesOnAndroid'
 import ProtectedUnauthorizedLabel from '../ProtectedItemOverlay/ProtectedUnauthorizedLabel'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 

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

@@ -1,6 +1,6 @@
 import { Component, createRef, MouseEventHandler } from 'react'
 import { debounce } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 export type ResizeFinishCallback = (
   lastWidth: number,

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

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { keyboardStringForShortcut, PIN_NOTE_COMMAND } from '@standardnotes/ui-services'
 import { useCommandService } from '../ApplicationView/CommandProvider'
 

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -1,6 +1,6 @@
 import { useDocumentRect } from '@/Hooks/useDocumentRect'
 import { useAutoElementRect } from '@/Hooks/useElementRect'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useCallback, useLayoutEffect, useState } from 'react'
 import Icon from '../Icon/Icon'
 import Portal from '../Portal/Portal'

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'

packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx

@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Switch from '@/Components/Switch/Switch'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { TOGGLE_FOCUS_MODE_COMMAND } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 

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

@@ -21,7 +21,7 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 export const focusModeAnimationDuration = 1255
 

packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx

@@ -8,7 +8,7 @@ import { ThemeItem } from './ThemeItem'
 import RadioIndicator from '../Radio/RadioIndicator'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   item: ThemeItem

packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ComponentPropsWithoutRef } from 'react'
 import RadioIndicator from './RadioIndicator'
 

packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx

@@ -1,6 +1,6 @@
 import { useMemo, ReactNode } from 'react'
 import { AppPaneId } from './AppPaneMetadata'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useResponsiveAppPane } from './ResponsivePaneProvider'
 
 type Props = {

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,5 +1,5 @@
 import { getPlatformString } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { ReactNode } from 'react'
 

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx

@@ -6,7 +6,7 @@ import HistoryModalFooter from './HistoryModalFooter'
 import HistoryModalContentPane from './HistoryModalContentPane'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
 import Icon from '../Icon/Icon'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { HistoryModalMobileTab } from './utils'
 
 const HistoryModalDialogContent = ({

packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { addToast, ToastType } from '@standardnotes/toast'
 import { useRef, useState } from 'react'
 import Icon from '../Icon/Icon'

packages/web/src/javascripts/Components/Shared/ModalDialog.tsx

@@ -1,6 +1,6 @@
 import { useRef, ReactNode } from 'react'
 import { AlertDialogContent, AlertDialogOverlay } from '@reach/alert-dialog'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   children: ReactNode

packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx

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

packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode, useEffect } from 'react'
 import { AlertDialogLabel } from '@reach/alert-dialog'
 import Icon from '@/Components/Icon/Icon'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 
 type Props = {

packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx

@@ -17,7 +17,7 @@ import { useTabState } from '../Tabs/useTabState'
 import TabsContainer from '../Tabs/TabsContainer'
 import CopyableCodeBlock from '../Shared/CopyableCodeBlock'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   controller: AddSmartViewModalController

packages/web/src/javascripts/Components/Tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ComponentPropsWithoutRef } from 'react'
 import { useTabStateContext } from './useTabState'
 

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -8,7 +8,7 @@ import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 're
 import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
 import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import UpgradeNow from '../Footer/UpgradeNow'
 import RoundIconButton from '../Button/RoundIconButton'

packages/web/src/javascripts/Components/Tags/RootTagDropZone.tsx

@@ -1,6 +1,6 @@
 import Icon from '@/Components/Icon/Icon'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { observer } from 'mobx-react-lite'
 import { DragEventHandler, FunctionComponent, useCallback, useState } from 'react'
 import { TagDragDataFormat } from './DragNDrop'

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 
 type Props = {

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -21,7 +21,7 @@ import {
 } from 'react'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useFileDragNDrop } from '../FileDragNDropProvider/FileDragNDropProvider'
 import { LinkingController } from '@/Controllers/LinkingController'
 import { TagListSectionType } from './TagListSection'