fix: Fixed issue where checklist item text in Super notes wasn't aligned correctly (#2656)

packages/models/src/Domain/Syncable/UserPrefs/EditorLineHeight.ts

@@ -6,3 +6,13 @@ export enum EditorLineHeight {
   Relaxed = 'Relaxed',
   Loose = 'Loose',
 }
+
+// https://tailwindcss.com/docs/line-height
+export const EditorLineHeightValues: { [key in EditorLineHeight]: number } = {
+  None: 1,
+  Tight: 1.25,
+  Snug: 1.375,
+  Normal: 1.5,
+  Relaxed: 1.625,
+  Loose: 2,
+}

packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/lists.scss

@@ -52,8 +52,8 @@
 .Lexical__listItemChecked,
 .Lexical__listItemUnchecked {
   position: relative;
-  padding-left: 24px;
+  padding-left: calc(var(--font-size) + 0.5rem);
-  padding-right: 24px;
+  padding-right: calc(var(--font-size) + 0.5rem);
   list-style-type: none;
   outline: none;
   vertical-align: middle;
@@ -65,10 +65,12 @@
 .Lexical__listItemUnchecked:before,
 .Lexical__listItemChecked:before {
   content: '';
-  width: 16px;
+  --size: 16px;
-  height: 16px;
+  width: var(--size);
+  height: var(--size);
   left: 0;
-  top: 7px;
+  top: calc(var(--line-height, 1) * var(--font-size) / 2);
+  transform: translateY(-50%);
   cursor: pointer;
   background-size: cover;
   position: absolute;
@@ -100,11 +102,12 @@
   border-style: solid;
   position: absolute;
   display: block;
-  top: 9px;
   width: 5px;
-  left: 6px;
+  height: 11px;
-  height: 10px;
+  --top: calc(var(--line-height, 1) * var(--font-size) / 2);
-  transform: rotate(45deg);
+  top: calc(var(--top) - 1px);
+  left: 5px;
+  transform: translateY(-50%) rotate(45deg);
   border-width: 0 2px 2px 0;
 }
 .Lexical__nestedListItem {

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

@@ -10,8 +10,9 @@ import {
   NativeFeatureIdentifier,
   FeatureStatus,
   GetSuperNoteFeature,
+  EditorLineHeightValues,
 } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { CSSProperties, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { BlocksEditor } from './BlocksEditor'
 import { BlocksEditorComposer } from './BlocksEditorComposer'
 import { ItemSelectionPlugin } from './Plugins/ItemSelectionPlugin/ItemSelectionPlugin'
@@ -165,7 +166,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const [fontSize, setFontSize] = useState<EditorFontSize>(() =>
     application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
   )
-  const responsiveFontSize = useResponsiveEditorFontSize(fontSize)
+  const responsiveFontSize = useResponsiveEditorFontSize(fontSize, false)
 
   const reloadPreferences = useCallback(() => {
     const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
@@ -211,11 +212,13 @@ export const SuperEditor: FunctionComponent<Props> = ({
 
   return (
     <div
-      className={classNames(
+      className="font-editor relative flex h-full w-full flex-col"
-        'font-editor relative flex h-full w-full flex-col',
+      style={
-        lineHeight && `leading-${lineHeight.toLowerCase()}`,
+        {
-        responsiveFontSize,
+          '--line-height': EditorLineHeightValues[lineHeight],
-      )}
+          '--font-size': responsiveFontSize,
+        } as CSSProperties
+      }
       ref={ref}
     >
       {featureStatus !== FeatureStatus.Entitled && (
@@ -228,9 +231,8 @@ export const SuperEditor: FunctionComponent<Props> = ({
               <BlocksEditor
                 onChange={handleChange}
                 className={classNames(
-                  'blocks-editor relative h-full resize-none px-4 py-4 focus:shadow-none focus:outline-none',
+                  'blocks-editor relative h-full resize-none px-4 py-4 text-[length:--font-size] focus:shadow-none focus:outline-none',
-                  lineHeight && `leading-${lineHeight.toLowerCase()}`,
+                  lineHeight && 'leading-[--line-height]',
-                  responsiveFontSize,
                 )}
                 previewLength={SuperNotePreviewCharLimit}
                 spellcheck={spellcheck}

packages/web/src/javascripts/Utils/getPlaintextFontSize.tsx

@@ -1,29 +1,29 @@
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { EditorFontSize } from '@standardnotes/snjs'
 
-export const useResponsiveEditorFontSize = (key: EditorFontSize): string => {
+export const useResponsiveEditorFontSize = (key: EditorFontSize, useTailwindClasses = true): string => {
   const desktopMapping: Record<EditorFontSize, string> = {
-    ExtraSmall: 'text-xs',
+    ExtraSmall: useTailwindClasses ? 'text-xs' : '0.75rem',
-    Small: 'text-sm',
+    Small: useTailwindClasses ? 'text-sm' : '0.875rem',
-    Normal: 'text-editor',
+    Normal: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
-    Medium: 'text-lg',
+    Medium: useTailwindClasses ? 'text-lg' : '1.125rem',
-    Large: 'text-xl',
+    Large: useTailwindClasses ? 'text-xl' : '1.25rem',
   }
 
   const mobileMapping: Record<EditorFontSize, string> = {
-    ExtraSmall: 'text-sm',
+    ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem',
-    Small: 'text-editor',
+    Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
-    Normal: 'text-lg',
+    Normal: useTailwindClasses ? 'text-lg' : '1.125rem',
-    Medium: 'text-xl',
+    Medium: useTailwindClasses ? 'text-xl' : '1.25rem',
-    Large: 'text-2xl',
+    Large: useTailwindClasses ? 'text-2xl' : '1.5rem',
   }
 
   const tabletMapping: Record<EditorFontSize, string> = {
-    ExtraSmall: 'text-sm',
+    ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem',
-    Small: 'text-editor',
+    Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
-    Normal: 'text-base',
+    Normal: useTailwindClasses ? 'text-base' : '1rem',
-    Medium: 'text-xl',
+    Medium: useTailwindClasses ? 'text-xl' : '1.25rem',
-    Large: 'text-2xl',
+    Large: useTailwindClasses ? 'text-2xl' : '1.5rem',
   }
 
   const isTabletScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)