mylesmarkevich/standardnotes-app
1
0
Fork 0
mirror of https://github.com/standardnotes/app synced 2026-01-16 19:04:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit f6c2991f46.
This commit is contained in:
Mo
2023-11-24 11:46:48 -06:00
parent a3a033bb5a
commit 305647a4da
4 changed files with 35 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/models/src/Domain/Syncable/UserPrefs/EditorLineHeight.ts
View File

@@ -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,
}

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

@@ -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 {

22
packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
View File

@@ -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"
style={
{
'--line-height': EditorLineHeightValues[lineHeight],
'--font-size': responsiveFontSize,
} as CSSProperties
}
className={classNames(
'font-editor relative flex h-full w-full flex-col',
lineHeight && `leading-${lineHeight.toLowerCase()}`,
responsiveFontSize,
)}
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',
lineHeight && 'leading-[--line-height]',
'blocks-editor relative h-full resize-none px-4 py-4 focus:shadow-none focus:outline-none',
lineHeight && `leading-${lineHeight.toLowerCase()}`,
responsiveFontSize,
)}
previewLength={SuperNotePreviewCharLimit}
spellcheck={spellcheck}

32
packages/web/src/javascripts/Utils/getPlaintextFontSize.tsx
View File

@@ -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',
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<EditorFontSize, string> = {
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<EditorFontSize, string> = {
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)