fix(richtext-lexical): match the indentation spacing of paragraphs and lists (#8437)
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  ## After 
This commit is contained in:
@@ -221,19 +221,34 @@
|
||||
|
||||
&__listItem {
|
||||
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,
|
||||
&__listItemUnchecked {
|
||||
position: relative;
|
||||
margin-inline: 0;
|
||||
padding-left: base(1.2);
|
||||
padding-right: base(1.2);
|
||||
// Instead of having margin-left: 40px like other list-items or indented paragraphs,
|
||||
// we use padding-left: 25px + margin-left: 15px = 40px, so that the click position
|
||||
// calculation in `CheckListPlugin` matches the checkbox
|
||||
margin-left: 15px;
|
||||
padding-left: 25px;
|
||||
list-style-type: 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 {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user