Merge remote-tracking branch 'origin/main' into skip-dom-selection

.github/workflows/tests.yml

@@ -9,9 +9,7 @@ on:
       - 'packages/lexical-website/**'
   pull_request:
     types: [opened, synchronize, reopened]
-    paths-ignore:
-      - 'examples/**'
-      - 'packages/lexical-website/**'
+  merge_group:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

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,16 +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;
+    }
+
     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;
   }
 
@@ -124,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;
   }
 
@@ -220,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);
     }
 
@@ -252,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;
@@ -381,7 +382,7 @@ export class ListItemNode extends ElementNode {
   }
 
   canMergeWith(node: LexicalNode): boolean {
-    return $isParagraphNode(node) || $isListItemNode(node);
+    return $isListItemNode(node) || $isParagraphNode(node);
   }
 
   extractWithChild(child: LexicalNode, selection: BaseSelection): boolean {

packages/lexical-list/src/formatList.ts

@@ -12,7 +12,6 @@ import {
   $getSelection,
   $isElementNode,
   $isLeafNode,
-  $isParagraphNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
   ElementNode,
@@ -243,7 +242,6 @@ export function removeList(editor: LexicalEditor): void {
 
           if ($isLeafNode(node)) {
             const listItemNode = $getNearestNodeOfType(node, ListItemNode);
-
             if (listItemNode != null) {
               listNodes.add($getTopListNode(listItemNode));
             }
@@ -479,11 +477,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,40 +493,35 @@ export function $handleListInsertParagraph(): boolean {
   );
 
   const grandparent = parent.getParent();
-
-  let replacementNode;
+  let replacementNode: ParagraphNode | ListItemNode;
 
   if ($isRootOrShadowRoot(grandparent)) {
     replacementNode = $createParagraphNode();
+    replacementNode.setTextStyle(selection.style);
+    replacementNode.setTextFormat(selection.format);
     topListNode.insertAfter(replacementNode);
   } else if ($isListItemNode(grandparent)) {
     replacementNode = $createListItemNode();
     grandparent.insertAfter(replacementNode);
   } 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 {
+    if ($isListItemNode(replacementNode)) {
       const newListItem = $createListItemNode();
       newListItem.append(newList);
       replacementNode.insertAfter(newListItem);
+    } else {
+      replacementNode.insertAfter(newList);
     }
-    nextSiblings.forEach((sibling) => {
-      sibling.remove();
-      newList.append(sibling);
-    });
+    newList.append(...nextSiblings);
   }
-
   // 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 {