From ccb0e20ad4ac331946ad4cf61e685af7c6265d80 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 1 Dec 2023 00:51:26 +0530
Subject: [PATCH] chore: fix super checklist rendering in conversion and
 history dialogs [skip e2e]

---
 .../NoteView/ReadonlyNoteContent.tsx          | 29 +++++++++++++++++--
 .../Components/SuperEditor/SuperEditor.tsx    | 29 ++-----------------
 .../SuperEditor/SuperNoteImporter.tsx         | 20 +++++++++++--
 3 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx b/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx
index b6392f4fb..dd0d23bb2 100644
--- a/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx
@@ -1,5 +1,14 @@
-import { ContentType, NoteContent, NoteType, SNNote, classNames, isUIFeatureAnIframeFeature } from '@standardnotes/snjs'
-import { UIEventHandler, useEffect, useMemo, useRef } from 'react'
+import {
+  ContentType,
+  EditorLineHeightValues,
+  NoteContent,
+  NoteType,
+  PrefKey,
+  SNNote,
+  classNames,
+  isUIFeatureAnIframeFeature,
+} from '@standardnotes/snjs'
+import { CSSProperties, UIEventHandler, useEffect, useMemo, useRef } from 'react'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useApplication } from '../ApplicationProvider'
 import IframeFeatureView from '../ComponentView/IframeFeatureView'
@@ -8,6 +17,8 @@ import { BlocksEditor } from '../SuperEditor/BlocksEditor'
 import { BlocksEditorComposer } from '../SuperEditor/BlocksEditorComposer'
 import { useLinkingController } from '@/Controllers/LinkingControllerProvider'
 import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
+import usePreference from '@/Hooks/usePreference'
+import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
 
 export const ReadonlyNoteContent = ({
   note,
@@ -74,6 +85,10 @@ export const ReadonlyNoteContent = ({
     })
   }, [scrollPos, shouldSyncScroll])
 
+  const lineHeight = usePreference(PrefKey.EditorLineHeight)
+  const fontSize = usePreference(PrefKey.EditorFontSize)
+  const responsiveFontSize = useResponsiveEditorFontSize(fontSize, false)
+
   return (
     <div className="flex h-full flex-grow flex-col overflow-hidden" ref={containerRef}>
       <div className={classNames('w-full px-4 pt-4 text-base font-bold', componentViewer && 'pb-4')}>
@@ -94,7 +109,15 @@ export const ReadonlyNoteContent = ({
         </div>
       ) : content.noteType === NoteType.Super ? (
         <ErrorBoundary>
-          <div className="w-full flex-grow overflow-hidden overflow-y-auto">
+          <div
+            className="w-full flex-grow overflow-hidden overflow-y-auto"
+            style={
+              {
+                '--line-height': EditorLineHeightValues[lineHeight],
+                '--font-size': responsiveFontSize,
+              } as CSSProperties
+            }
+          >
             <BlocksEditorComposer readonly initialValue={content.text} key={content.text}>
               <BlocksEditor
                 readonly
diff --git a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
index 5ec755cac..eebf9ae15 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
@@ -1,12 +1,8 @@
 import { WebApplication } from '@/Application/WebApplication'
 import {
-  ApplicationEvent,
   classNames,
-  EditorFontSize,
-  EditorLineHeight,
   isPayloadSourceRetrieved,
   PrefKey,
-  PrefDefaults,
   NativeFeatureIdentifier,
   FeatureStatus,
   GetSuperNoteFeature,
@@ -48,6 +44,7 @@ import CodeOptionsPlugin from './Plugins/CodeOptionsPlugin/CodeOptions'
 import RemoteImagePlugin from './Plugins/RemoteImagePlugin/RemoteImagePlugin'
 import NotEntitledBanner from '../ComponentView/NotEntitledBanner'
 import AutoFocusPlugin from './Plugins/AutoFocusPlugin'
+import usePreference from '@/Hooks/usePreference'
 
 export const SuperNotePreviewCharLimit = 160
 
@@ -160,30 +157,10 @@ export const SuperEditor: FunctionComponent<Props> = ({
     return disposer
   }, [controller, controller.item.uuid])
 
-  const [lineHeight, setLineHeight] = useState<EditorLineHeight>(() =>
-    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
-  )
-  const [fontSize, setFontSize] = useState<EditorFontSize>(() =>
-    application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
-  )
+  const lineHeight = usePreference(PrefKey.EditorLineHeight)
+  const fontSize = usePreference(PrefKey.EditorFontSize)
   const responsiveFontSize = useResponsiveEditorFontSize(fontSize, false)
 
-  const reloadPreferences = useCallback(() => {
-    const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
-    const fontSize = application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize])
-
-    setLineHeight(lineHeight)
-    setFontSize(fontSize)
-  }, [application])
-
-  useEffect(() => {
-    reloadPreferences()
-
-    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
-      reloadPreferences()
-    })
-  }, [reloadPreferences, application])
-
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
diff --git a/packages/web/src/javascripts/Components/SuperEditor/SuperNoteImporter.tsx b/packages/web/src/javascripts/Components/SuperEditor/SuperNoteImporter.tsx
index 27eff3696..9ca177548 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/SuperNoteImporter.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/SuperNoteImporter.tsx
@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { NoteType, SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
+import { EditorLineHeightValues, NoteType, PrefKey, SNNote } from '@standardnotes/snjs'
+import { CSSProperties, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
 import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
 import { NoteViewController } from '../NoteView/Controller/NoteViewController'
@@ -8,6 +8,8 @@ import { spaceSeparatedStrings } from '@standardnotes/utils'
 import Modal, { ModalAction } from '@/Components/Modal/Modal'
 import { BlocksEditor } from './BlocksEditor'
 import { BlocksEditorComposer } from './BlocksEditorComposer'
+import usePreference from '@/Hooks/usePreference'
+import { useResponsiveEditorFontSize } from '@/Utils/getPlaintextFontSize'
 
 const NotePreviewCharLimit = 160
 
@@ -123,6 +125,10 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
     [canBeConvertedAsIs, closeDialog, confirmConvert, convertAsIs],
   )
 
+  const lineHeight = usePreference(PrefKey.EditorLineHeight)
+  const fontSize = usePreference(PrefKey.EditorFontSize)
+  const responsiveFontSize = useResponsiveEditorFontSize(fontSize, false)
+
   if (isSeamlessConvert) {
     return null
   }
@@ -133,7 +139,15 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
         The following is a preview of how your note will look when converted to Super. Super notes use a custom format
         under the hood. Converting your note will transition it from plaintext to the custom Super format.
       </div>
-      <div className="relative w-full px-4 py-4">
+      <div
+        className="relative w-full px-4 py-4"
+        style={
+          {
+            '--line-height': EditorLineHeightValues[lineHeight],
+            '--font-size': responsiveFontSize,
+          } as CSSProperties
+        }
+      >
         <ErrorBoundary>
           <BlocksEditorComposer readonly initialValue={undefined}>
             <BlocksEditor