From f50174f5b8634edab3cfc748b993465926f4e663 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?=
 <43938777+GermanJablo@users.noreply.github.com>
Date: Fri, 27 Sep 2024 13:28:36 -0300
Subject: [PATCH] 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


![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)
---
 .../src/lexical/theme/EditorTheme.scss        | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
index 6ce818dd3..b0fe93378 100644
--- a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
+++ b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
@@ -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;
   }