[Breaking Change][lexical-list] Fix: Preserve original format after i…

…ndenting list item (#6912)

Co-authored-by: Bob Ippolito <[email protected]>
Co-authored-by: Gerard Rovira <[email protected]>

packages/lexical-list/src/LexicalListItemNode.ts

@@ -7,20 +7,6 @@
  */
 
 import type {ListNode, ListType} from './';
-import type {
-  BaseSelection,
-  DOMConversionMap,
-  DOMConversionOutput,
-  DOMExportOutput,
-  EditorConfig,
-  EditorThemeClasses,
-  LexicalNode,
-  NodeKey,
-  ParagraphNode,
-  RangeSelection,
-  SerializedElementNode,
-  Spread,
-} from 'lexical';
 
 import {
   addClassNamesToElement,
@@ -29,11 +15,24 @@ import {
 import {
   $applyNodeReplacement,
   $createParagraphNode,
+  $getSelection,
   $isElementNode,
   $isParagraphNode,
   $isRangeSelection,
+  BaseSelection,
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  EditorThemeClasses,
   ElementNode,
   LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  ParagraphNode,
+  RangeSelection,
+  SerializedParagraphNode,
+  Spread,
 } from 'lexical';
 import invariant from 'shared/invariant';
 import normalizeClassNames from 'shared/normalizeClassNames';
@@ -47,11 +46,11 @@ export type SerializedListItemNode = Spread<
     checked: boolean | undefined;
     value: number;
   },
-  SerializedElementNode
+  SerializedParagraphNode
 >;
 
 /** @noInheritDoc */
-export class ListItemNode extends ElementNode {
+export class ListItemNode extends ParagraphNode {
   /** @internal */
   __value: number;
   /** @internal */
@@ -81,20 +80,18 @@ export class ListItemNode extends ElementNode {
     $setListItemThemeClassNames(element, config.theme, this);
     return element;
   }
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
+    if (super.updateDOM(prevNode, dom, config)) {
+      return true;
+    }
 
-  updateDOM(
-    prevNode: ListItemNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
     const parent = this.getParent();
     if ($isListNode(parent) && parent.getListType() === 'check') {
       updateListItemChecked(dom, this, prevNode, parent);
     }
     // @ts-expect-error - this is always HTMLListItemElement
     dom.value = this.__value;
     $setListItemThemeClassNames(dom, config.theme, this);
-
     return false;
   }
 
@@ -128,6 +125,12 @@ export class ListItemNode extends ElementNode {
     node.setValue(serializedNode.value);
     node.setFormat(serializedNode.format);
     node.setDirection(serializedNode.direction);
+    if (typeof serializedNode.textFormat === 'number') {
+      node.setTextFormat(serializedNode.textFormat);
+    }
+    if (typeof serializedNode.textStyle === 'string') {
+      node.setTextStyle(serializedNode.textStyle);
+    }
     return node;
   }
 
@@ -224,15 +227,11 @@ export class ListItemNode extends ElementNode {
     }
 
     const siblings = this.getNextSiblings();
-
-    // Split the lists and insert the node in between them
     listNode.insertAfter(node, restoreSelection);
 
     if (siblings.length !== 0) {
       const newListNode = $createListNode(listNode.getListType());
-
       siblings.forEach((sibling) => newListNode.append(sibling));
-
       node.insertAfter(newListNode, restoreSelection);
     }
 
@@ -256,51 +255,49 @@ export class ListItemNode extends ElementNode {
   }
 
   insertNewAfter(
-    _: RangeSelection,
+    selection: RangeSelection,
     restoreSelection = true,
   ): ListItemNode | ParagraphNode {
     const newElement = $createListItemNode(
       this.__checked == null ? undefined : false,
     );
+
+    const format = selection.format;
+    newElement.setTextFormat(format);
+
+    newElement.setFormat(this.getFormatType());
     this.insertAfter(newElement, restoreSelection);
 
     return newElement;
   }
 
-  collapseAtStart(selection: RangeSelection): true {
+  collapseAtStart(): boolean {
+    const selection = $getSelection();
+
+    if (!$isRangeSelection(selection)) {
+      return false;
+    }
+
     const paragraph = $createParagraphNode();
     const children = this.getChildren();
     children.forEach((child) => paragraph.append(child));
+
     const listNode = this.getParentOrThrow();
-    const listNodeParent = listNode.getParentOrThrow();
-    const isIndented = $isListItemNode(listNodeParent);
+    const listNodeParent = listNode.getParent();
+
+    if (!$isListNode(listNode)) {
+      return false;
+    }
 
     if (listNode.getChildrenSize() === 1) {
-      if (isIndented) {
-        // if the list node is nested, we just want to remove it,
-        // effectively unindenting it.
+      if ($isListItemNode(listNodeParent)) {
         listNode.remove();
         listNodeParent.select();
       } else {
         listNode.insertBefore(paragraph);
         listNode.remove();
-        // If we have selection on the list item, we'll need to move it
-        // to the paragraph
-        const anchor = selection.anchor;
-        const focus = selection.focus;
-        const key = paragraph.getKey();
-
-        if (anchor.type === 'element' && anchor.getNode().is(this)) {
-          anchor.set(key, anchor.offset, 'element');
-        }
-
-        if (focus.type === 'element' && focus.getNode().is(this)) {
-          focus.set(key, focus.offset, 'element');
-        }
+        paragraph.select();
       }
-    } else {
-      listNode.insertBefore(paragraph);
-      this.remove();
     }
 
     return true;

packages/lexical-list/src/formatList.ts

@@ -243,7 +243,6 @@ export function removeList(editor: LexicalEditor): void {
 
           if ($isLeafNode(node)) {
             const listItemNode = $getNearestNodeOfType(node, ListItemNode);
-
             if (listItemNode != null) {
               listNodes.add($getTopListNode(listItemNode));
             }
@@ -479,11 +478,13 @@ export function $handleListInsertParagraph(): boolean {
     return false;
   }
   // Only run this code on empty list items
+
   const anchor = selection.anchor.getNode();
 
   if (!$isListItemNode(anchor) || anchor.getChildrenSize() !== 0) {
     return false;
   }
+
   const topListNode = $getTopListNode(anchor);
   const parent = anchor.getParent();
 
@@ -493,8 +494,7 @@ export function $handleListInsertParagraph(): boolean {
   );
 
   const grandparent = parent.getParent();
-
-  let replacementNode;
+  let replacementNode: ElementNode;
 
   if ($isRootOrShadowRoot(grandparent)) {
     replacementNode = $createParagraphNode();
@@ -505,13 +505,12 @@ export function $handleListInsertParagraph(): boolean {
   } else {
     return false;
   }
+
   replacementNode.select();
 
   const nextSiblings = anchor.getNextSiblings();
-
   if (nextSiblings.length > 0) {
     const newList = $createListNode(parent.getListType());
-
     if ($isParagraphNode(replacementNode)) {
       replacementNode.insertAfter(newList);
     } else {
@@ -524,9 +523,7 @@ export function $handleListInsertParagraph(): boolean {
       newList.append(sibling);
     });
   }
-
   // Don't leave hanging nested empty lists
   $removeHighestEmptyListParent(anchor);
-
   return true;
 }

packages/lexical-list/src/utils.ts

@@ -6,9 +6,8 @@
  *
  */
 
-import type {LexicalNode, Spread} from 'lexical';
-
 import {$findMatchingParent} from '@lexical/utils';
+import {type LexicalNode, type Spread} from 'lexical';
 import invariant from 'shared/invariant';
 
 import {

packages/lexical-playground/__tests__/e2e/List.spec.mjs

@@ -17,6 +17,7 @@ import {
   redo,
   selectAll,
   selectCharacters,
+  toggleBold,
   undo,
 } from '../keyboardShortcuts/index.mjs';
 import {
@@ -1881,4 +1882,48 @@ test.describe.parallel('Nested List', () => {
       });
     },
   );
+  test('new list item should preserve format from previous list item even after new list item is indented', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await toggleBulletList(page);
+    await toggleBold(page);
+    await page.keyboard.type('MLH Fellowship');
+    await page.keyboard.press('Enter');
+    await clickIndentButton(page);
+    await page.keyboard.type('Fall 2024');
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            value="1">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              MLH Fellowship
+            </strong>
+          </li>
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
+            value="2">
+            <ul class="PlaygroundEditorTheme__ul">
+              <li
+                class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+                dir="ltr"
+                value="1">
+                <strong
+                  class="PlaygroundEditorTheme__textBold"
+                  data-lexical-text="true">
+                  Fall 2024
+                </strong>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      `,
+    );
+  });
 });

packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx

@@ -1026,7 +1026,7 @@ describe('LexicalEditor tests', () => {
       editable ? 'editable' : 'non-editable'
     })`, async () => {
       const JSON_EDITOR_STATE =
-        '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+        '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
       init();
       const contentEditable = editor.getRootElement();
       editor.setEditable(editable);