Fix forward word deletion destructing element nodes (#5625)

packages/lexical-playground/src/nodes/LayoutContainerNode.ts

@@ -65,6 +65,10 @@ export class LayoutContainerNode extends ElementNode {
     return $createLayoutContainerNode(json.templateColumns);
   }
 
+  isShadowRoot(): boolean {
+    return true;
+  }
+
   canBeEmpty(): boolean {
     return false;
   }

packages/lexical/src/LexicalSelection.ts

@@ -1537,19 +1537,19 @@ export class RangeSelection implements BaseSelection {
       }
     }
   }
-
   /**
-   * Performs one logical character deletion operation on the EditorState based on the current Selection.
+   * Helper for handling forward character and word deletion that prevents element nodes
-   * Handles different node types.
+   * like a table, columns layout being destroyed
    *
-   * @param isBackward whether or not the selection is backwards.
+   * @param anchor the anchor
+   * @param anchorNode the anchor node in the selection
+   * @param isBackward whether or not selection is backwards
    */
-  deleteCharacter(isBackward: boolean): void {
+  forwardDeletion(
-    const wasCollapsed = this.isCollapsed();
+    anchor: PointType,
-    if (this.isCollapsed()) {
+    anchorNode: TextNode | ElementNode,
-      const anchor = this.anchor;
+    isBackward: boolean,
-      const focus = this.focus;
+  ): boolean {
-      let anchorNode: TextNode | ElementNode | null = anchor.getNode();
     if (
       !isBackward &&
       // Delete forward handle case
@@ -1565,10 +1565,29 @@ export class RangeSelection implements BaseSelection {
         (parent === null ? null : parent.getNextSibling());
 
       if ($isElementNode(nextSibling) && nextSibling.isShadowRoot()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Performs one logical character deletion operation on the EditorState based on the current Selection.
+   * Handles different node types.
+   *
+   * @param isBackward whether or not the selection is backwards.
+   */
+  deleteCharacter(isBackward: boolean): void {
+    const wasCollapsed = this.isCollapsed();
+    if (this.isCollapsed()) {
+      const anchor = this.anchor;
+      let anchorNode: TextNode | ElementNode | null = anchor.getNode();
+      if (this.forwardDeletion(anchor, anchorNode, isBackward)) {
         return;
       }
-      }
+
       // Handle the deletion around decorators.
+      const focus = this.focus;
       const possibleNode = $getAdjacentNode(focus, isBackward);
       if ($isDecoratorNode(possibleNode) && !possibleNode.isIsolated()) {
         // Make it possible to move selection from range selection to
@@ -1689,6 +1708,9 @@ export class RangeSelection implements BaseSelection {
    */
   deleteWord(isBackward: boolean): void {
     if (this.isCollapsed()) {
+      const anchor = this.anchor;
+      const anchorNode: TextNode | ElementNode | null = anchor.getNode();
+      if (this.forwardDeletion(anchor, anchorNode, isBackward)) return;
       this.modify('extend', isBackward, 'word');
     }
     this.removeText();