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

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

Browse Source
This commit is contained in:
Aman Harwara
2023-11-27 19:54:38 +05:30
committed by GitHub
parent c6b952ef23
commit 8ff0d20858
4 changed files with 50 additions and 35 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,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,
}

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: 24px;
padding-right: 24px;
padding-left: calc(var(--font-size) + 0.5rem);
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;
height: 16px;
--size: 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: 10px;
transform: rotate(45deg);
height: 11px;
--top: calc(var(--line-height, 1) * var(--font-size) / 2);
top: calc(var(--top) - 1px);
left: 5px;
transform: translateY(-50%) rotate(45deg);
border-width: 0 2px 2px 0;
}
.Lexical__nestedListItem {

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

@@ -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(
'font-editor relative flex h-full w-full flex-col',
lineHeight && `leading-${lineHeight.toLowerCase()}`,
responsiveFontSize,
)}
className="font-editor relative flex h-full w-full flex-col"
style={
{
'--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',
lineHeight && `leading-${lineHeight.toLowerCase()}`,
responsiveFontSize,
'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]',
)}
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): string => {
export const useResponsiveEditorFontSize = (key: EditorFontSize, useTailwindClasses = true): string => {
const desktopMapping: Record<EditorFontSize, string> = {
ExtraSmall: 'text-xs',
Small: 'text-sm',
Normal: 'text-editor',
Medium: 'text-lg',
Large: 'text-xl',
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',
}
const mobileMapping: Record<EditorFontSize, string> = {
ExtraSmall: 'text-sm',
Small: 'text-editor',
Normal: 'text-lg',
Medium: 'text-xl',
Large: 'text-2xl',
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',
}
const tabletMapping: Record<EditorFontSize, string> = {
ExtraSmall: 'text-sm',
Small: 'text-editor',
Normal: 'text-base',
Medium: 'text-xl',
Large: 'text-2xl',
ExtraSmall: useTailwindClasses ? 'text-sm' : '0.875rem',
Small: useTailwindClasses ? 'text-editor' : 'var(--sn-stylekit-font-size-editor)',
Normal: useTailwindClasses ? 'text-base' : '1rem',
Medium: useTailwindClasses ? 'text-xl' : '1.25rem',
Large: useTailwindClasses ? 'text-2xl' : '1.5rem',
}
const isTabletScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)