tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(richtext-lexical): match the indentation spacing of paragraphs and lists (#8437)

Browse Source 
Before this, indented paragraphs, un/ordered list-items, and checkbox
list-items had 3 different sizes.

This PR unifies all 3 to match.

Related:
- https://github.com/payloadcms/payload/pull/8138
- https://github.com/facebook/lexical/pull/4025

List-items were using a custom indentation size, instead of the
browser's default. The reason I'm adapting list-items to this default
size and not the paragraphs to list-items, is because when
importing/exporting html in contexts where our CSS isn't present, visual
consistency is maintained.

Also, the browsers' default looks fine to me.

Note: Lexical's detection of whether the checkbox is clicked is a bit
hacky. I've made sure it doesn't break and added an explanatory comment
to prevent anyone from breaking it in the future.

## Before


![image](https://github.com/user-attachments/assets/7195a592-a695-4131-af1a-df016c215758)

## After


![image](https://github.com/user-attachments/assets/ef3b708f-2ce6-4bf0-951e-15c550cdcc65)
This commit is contained in:
Germán Jabloñski
2024-09-27 13:28:36 -03:00
committed by GitHub
parent 17e0547db3
commit f50174f5b8
1 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
View File

@@ -221,19 +221,34 @@
&__listItem { &__listItem {
font-size: base(0.8); font-size: base(0.8);
margin: 0 0 0.4em base(0.8); margin: 0 0 0.4em 40px;
}
&__listItem[dir='rtl'] {
margin: 0 40px 0.4em 0;
} }
&__listItemChecked, &__listItemChecked,
&__listItemUnchecked { &__listItemUnchecked {
position: relative; position: relative;
margin-inline: 0; // Instead of having margin-left: 40px like other list-items or indented paragraphs,
padding-left: base(1.2); // we use padding-left: 25px + margin-left: 15px = 40px, so that the click position
padding-right: base(1.2); // calculation in `CheckListPlugin` matches the checkbox
margin-left: 15px;
padding-left: 25px;
list-style-type: none; list-style-type: none;
outline: none; outline: none;
} }
// See comment above for why we need this
&__listItemUnchecked[dir='rtl'],
&__listItemChecked[dir='rtl'] {
margin-left: 0;
padding-left: 0;
padding-right: 25px;
margin-right: 15px;
}
&__listItemChecked { &__listItemChecked {
text-decoration: line-through; text-decoration: line-through;
} }