From 305647a4da62bd962c5d77989cdc6dcc9be40f78 Mon Sep 17 00:00:00 2001 From: Mo Date: Fri, 24 Nov 2023 11:46:48 -0600 Subject: [PATCH] Revert "fix: Fixed issue with checklist alignment in Super notes" This reverts commit f6c2991f460bf234b304f17929b0413282ff5fd5. --- .../Syncable/UserPrefs/EditorLineHeight.ts | 10 ------ .../SuperEditor/Lexical/Theme/lists.scss | 21 ++++++------ .../Components/SuperEditor/SuperEditor.tsx | 22 ++++++------- .../Utils/getPlaintextFontSize.tsx | 32 +++++++++---------- 4 files changed, 35 insertions(+), 50 deletions(-) diff --git a/packages/models/src/Domain/Syncable/UserPrefs/EditorLineHeight.ts b/packages/models/src/Domain/Syncable/UserPrefs/EditorLineHeight.ts index 3f423f723..9c3f4e118 100644 --- a/packages/models/src/Domain/Syncable/UserPrefs/EditorLineHeight.ts +++ b/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, -} diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/lists.scss b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/lists.scss index 188b50444..88d798989 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/lists.scss +++ b/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-right: calc(var(--font-size) + 0.5rem); + padding-left: 24px; + 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: var(--size); - height: var(--size); + width: 16px; + height: 16px; left: 0; - top: calc(var(--line-height, 1) * var(--font-size) / 2); - transform: translateY(-50%); + top: 7px; cursor: pointer; background-size: cover; position: absolute; @@ -102,12 +100,11 @@ border-style: solid; position: absolute; display: block; + top: 9px; width: 5px; - height: 11px; - --top: calc(var(--line-height, 1) * var(--font-size) / 2); - top: calc(var(--top) - 1px); - left: 5px; - transform: translateY(-50%) rotate(45deg); + left: 6px; + height: 10px; + transform: rotate(45deg); border-width: 0 2px 2px 0; } .Lexical__nestedListItem { diff --git a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx index 5ec755cac..78809b7d1 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx +++ b/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 = ({ const [fontSize, setFontSize] = useState(() => 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 = ({ return (
{featureStatus !== FeatureStatus.Entitled && ( @@ -231,8 +228,9 @@ export const SuperEditor: FunctionComponent = ({ { +export const useResponsiveEditorFontSize = (key: EditorFontSize): string => { const desktopMapping: Record = { - ExtraSmall: useTailwindClasses ? 'text-xs' : '0.75rem', - Small: useTailwindClasses ? 'text-sm' : '0.875rem', - Normal: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)', - Medium: useTailwindClasses ? 'text-lg' : '1.125rem', - Large: useTailwindClasses ? 'text-xl' : '1.25rem', + ExtraSmall: 'text-xs', + Small: 'text-sm', + Normal: 'text-editor', + Medium: 'text-lg', + Large: 'text-xl', } const mobileMapping: Record = { - ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem', - Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)', - Normal: useTailwindClasses ? 'text-lg' : '1.125rem', - Medium: useTailwindClasses ? 'text-xl' : '1.25rem', - Large: useTailwindClasses ? 'text-2xl' : '1.5rem', + ExtraSmall: 'text-sm', + Small: 'text-editor', + Normal: 'text-lg', + Medium: 'text-xl', + Large: 'text-2xl', } const tabletMapping: Record = { - ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem', - Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)', - Normal: useTailwindClasses ? 'text-base' : '', - Medium: useTailwindClasses ? 'text-xl' : '1.25rem', - Large: useTailwindClasses ? 'text-2xl' : '1.5rem', + ExtraSmall: 'text-sm', + Small: 'text-editor', + Normal: 'text-base', + Medium: 'text-xl', + Large: 'text-2xl', } const isTabletScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)