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

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 { FunctionComponent, useCallback, useEffect, useRef } from 'react'
+import { ApplicationEvent, EditorLineHeight, isPayloadSourceRetrieved, PrefKey } from '@standardnotes/snjs'
+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}
               >