Revert "fix: Fixed issue with checklist alignment in Super notes"

This reverts commit f6c2991f46.

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

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

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

@@ -10,9 +10,8 @@ import {
   NativeFeatureIdentifier,
   FeatureStatus,
   GetSuperNoteFeature,
-  EditorLineHeightValues,
 } from '@standardnotes/snjs'
-import { CSSProperties, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { BlocksEditor } from './BlocksEditor'
 import { BlocksEditorComposer } from './BlocksEditorComposer'
 import { ItemSelectionPlugin } from './Plugins/ItemSelectionPlugin/ItemSelectionPlugin'
@@ -166,7 +165,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const [fontSize, setFontSize] = useState<EditorFontSize>(() =>
     application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
   )
-  const responsiveFontSize = useResponsiveEditorFontSize(fontSize, false)
+  const responsiveFontSize = useResponsiveEditorFontSize(fontSize)
 
   const reloadPreferences = useCallback(() => {
     const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
@@ -212,13 +211,11 @@ export const SuperEditor: FunctionComponent<Props> = ({
 
   return (
     <div
-      className="font-editor relative flex h-full w-full flex-col"
+      className={classNames(
-      style={
+        'font-editor relative flex h-full w-full flex-col',
-        {
+        lineHeight && `leading-${lineHeight.toLowerCase()}`,
-          '--line-height': EditorLineHeightValues[lineHeight],
+        responsiveFontSize,
-          '--font-size': responsiveFontSize,
+      )}
-        } as CSSProperties
-      }
       ref={ref}
     >
       {featureStatus !== FeatureStatus.Entitled && (
@@ -231,8 +228,9 @@ export const SuperEditor: FunctionComponent<Props> = ({
               <BlocksEditor
                 onChange={handleChange}
                 className={classNames(
-                  'blocks-editor relative h-full resize-none px-4 py-4 text-[length:--font-size] focus:shadow-none focus:outline-none',
+                  'blocks-editor relative h-full resize-none px-4 py-4 focus:shadow-none focus:outline-none',
-                  lineHeight && 'leading-[--line-height]',
+                  lineHeight && `leading-${lineHeight.toLowerCase()}`,
+                  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, useTailwindClasses = true): string => {
+export const useResponsiveEditorFontSize = (key: EditorFontSize): string => {
   const desktopMapping: Record<EditorFontSize, string> = {
-    ExtraSmall: useTailwindClasses ? 'text-xs' : '0.75rem',
+    ExtraSmall: 'text-xs',
-    Small: useTailwindClasses ? 'text-sm' : '0.875rem',
+    Small: 'text-sm',
-    Normal: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
+    Normal: 'text-editor',
-    Medium: useTailwindClasses ? 'text-lg' : '1.125rem',
+    Medium: 'text-lg',
-    Large: useTailwindClasses ? 'text-xl' : '1.25rem',
+    Large: 'text-xl',
   }
 
   const mobileMapping: Record<EditorFontSize, string> = {
-    ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem',
+    ExtraSmall: 'text-sm',
-    Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
+    Small: 'text-editor',
-    Normal: useTailwindClasses ? 'text-lg' : '1.125rem',
+    Normal: 'text-lg',
-    Medium: useTailwindClasses ? 'text-xl' : '1.25rem',
+    Medium: 'text-xl',
-    Large: useTailwindClasses ? 'text-2xl' : '1.5rem',
+    Large: 'text-2xl',
   }
 
   const tabletMapping: Record<EditorFontSize, string> = {
-    ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem',
+    ExtraSmall: 'text-sm',
-    Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
+    Small: 'text-editor',
-    Normal: useTailwindClasses ? 'text-base' : '',
+    Normal: 'text-base',
-    Medium: useTailwindClasses ? 'text-xl' : '1.25rem',
+    Medium: 'text-xl',
-    Large: useTailwindClasses ? 'text-2xl' : '1.5rem',
+    Large: 'text-2xl',
   }
 
   const isTabletScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)