From 9b2520aa0cff4ecdc43a03413817fc862b6ef5db Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Fri, 4 Oct 2024 15:11:09 +0100
Subject: [PATCH] WYSIWYG: Fixed list indenting selection & display bugs

- Fixed selection breaking on multiple indent changes
- Fixed multi-indent showing numbers on empty child list until the nodes
  are fully re-rendered.
---
 .../js/wysiwyg/nodes/custom-list-item.ts      |  2 ++
 resources/js/wysiwyg/todo.md                  |  2 +-
 resources/js/wysiwyg/utils/lists.ts           | 27 +++++++++++--------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/resources/js/wysiwyg/nodes/custom-list-item.ts b/resources/js/wysiwyg/nodes/custom-list-item.ts
index 659a55a15..11887b436 100644
--- a/resources/js/wysiwyg/nodes/custom-list-item.ts
+++ b/resources/js/wysiwyg/nodes/custom-list-item.ts
@@ -55,6 +55,8 @@ export class CustomListItemNode extends ListItemNode {
         if ($isListNode(parent) && parent.getListType() === 'check') {
             updateListItemChecked(dom, this);
         }
+
+        dom.style.listStyle = $hasNestedListWithoutLabel(this) ? 'none' : '';
         // @ts-expect-error - this is always HTMLListItemElement
         dom.value = this.__value;
 
diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md
index d2213f762..a49cccd26 100644
--- a/resources/js/wysiwyg/todo.md
+++ b/resources/js/wysiwyg/todo.md
@@ -20,4 +20,4 @@
 
 ## Bugs
 
-- List selection can get lost on nesting/unnesting
\ No newline at end of file
+//
\ No newline at end of file
diff --git a/resources/js/wysiwyg/utils/lists.ts b/resources/js/wysiwyg/utils/lists.ts
index edde994e5..30a97cbc1 100644
--- a/resources/js/wysiwyg/utils/lists.ts
+++ b/resources/js/wysiwyg/utils/lists.ts
@@ -1,14 +1,14 @@
 import {$createCustomListItemNode, $isCustomListItemNode, CustomListItemNode} from "../nodes/custom-list-item";
 import {$createCustomListNode, $isCustomListNode} from "../nodes/custom-list";
-import {BaseSelection, LexicalEditor} from "lexical";
-import {$getBlockElementNodesInSelection, $selectNodes, $toggleSelection, getLastSelection} from "./selection";
+import {$getSelection, BaseSelection, LexicalEditor} from "lexical";
+import {$getBlockElementNodesInSelection, $selectNodes, $toggleSelection} from "./selection";
 import {nodeHasInset} from "./nodes";
 
 
-export function $nestListItem(node: CustomListItemNode) {
+export function $nestListItem(node: CustomListItemNode): CustomListItemNode {
     const list = node.getParent();
     if (!$isCustomListNode(list)) {
-        return;
+        return node;
     }
 
     const listItems = list.getChildren() as CustomListItemNode[];
@@ -27,14 +27,16 @@ export function $nestListItem(node: CustomListItemNode) {
         prevListItem.append(newList);
         node.remove();
     }
+
+    return newListItem;
 }
 
-export function $unnestListItem(node: CustomListItemNode) {
+export function $unnestListItem(node: CustomListItemNode): CustomListItemNode {
     const list = node.getParent();
     const parentListItem = list?.getParent();
     const outerList = parentListItem?.getParent();
     if (!$isCustomListNode(list) || !$isCustomListNode(outerList) || !$isCustomListItemNode(parentListItem)) {
-        return;
+        return node;
     }
 
     parentListItem.insertAfter(node);
@@ -45,6 +47,8 @@ export function $unnestListItem(node: CustomListItemNode) {
     if (parentListItem.getChildren().length === 0) {
         parentListItem.remove();
     }
+
+    return node;
 }
 
 function getListItemsForSelection(selection: BaseSelection|null): (CustomListItemNode|null)[] {
@@ -89,24 +93,25 @@ function $reduceDedupeListItems(listItems: (CustomListItemNode|null)[]): CustomL
 }
 
 export function $setInsetForSelection(editor: LexicalEditor, change: number): void {
-    const selection = getLastSelection(editor);
-
+    const selection = $getSelection();
     const listItemsInSelection = getListItemsForSelection(selection);
     const isListSelection = listItemsInSelection.length > 0 && !listItemsInSelection.includes(null);
 
     if (isListSelection) {
+        const alteredListItems = [];
         const listItems = $reduceDedupeListItems(listItemsInSelection);
         if (change > 0) {
             for (const listItem of listItems) {
-                $nestListItem(listItem);
+                alteredListItems.push($nestListItem(listItem));
             }
         } else if (change < 0) {
             for (const listItem of [...listItems].reverse()) {
-                $unnestListItem(listItem);
+                alteredListItems.push($unnestListItem(listItem));
             }
+            alteredListItems.reverse();
         }
 
-        $selectNodes(listItems);
+        $selectNodes(alteredListItems);
         return;
     }