[lexical-playground] Bug Fix: Ensure Delete Node handles all node types

[mshaheerz]

[lexical-playground] Bug Fix: Ensure Delete Node handles all node types

• Fixed an issue where Delete Node did not handle specific node types ( image, inline-image, page-break, excalidraw, horizontalrule).
• Added support for these node types to ensure consistent deletion behavior.

Description

Current Behavior:

Previously, the "Delete Node" option in the context menu did not handle specific node types (image, inline-image, page-break, excalidraw, horizontalrule). Attempting to delete these nodes would fail, causing inconsistent behavior.

Changes in this PR:
This PR fixes the issue by adding support for these node types. The following updates were made:

Added handling for isNodeSelection to delete selected nodes of specific types.
Extended the list of deletable node types.
Imported $isNodeSelection from Lexical to support these changes.
This PR ensures that users can delete nodes of all supported types consistently.

Code Changes

File Modified

packages/lexical-playground/src/plugins/ContextMenuPlugin/index.tsx

Code Added/Modified

Here’s the updated snippet for the ContextMenuOption:

new ContextMenuOption(`Delete Node`, {
  onSelect: (_node) => {
    const selection = $getSelection();
    if ($isRangeSelection(selection)) {
      const currentNode = selection.anchor.getNode();
      const ancestorNodeWithRootAsParent = currentNode
        .getParents()
        .at(-2);

      ancestorNodeWithRootAsParent?.remove();
    } else if ($isNodeSelection(selection)) {
      const selectedNodes = selection.getNodes();
      const deletableNodeTypes = new Set([
        'image',
        'inline-image',
        'page-break',
        'excalidraw',
        'horizontalrule',
      ]);

      selectedNodes.forEach((node) => {
        if (deletableNodeTypes.has(node.getType())) {
          node.remove();
        }
      });
    }
  },
}),

Imports Added

In the same file, ensure the following import line includes isNodeSelection:

import {
  $getNearestNodeFromDOMNode,
  $getSelection,
  $isNodeSelection, // Added import
  $isRangeSelection,
  COPY_COMMAND,
  CUT_COMMAND,
  type LexicalNode,
  PASTE_COMMAND,
} from 'lexical';

Test Plan

Before

1. Attempted to delete nodes of types like image, inline-image, page-break, etc., using the "Delete Node" option.
2. Observed that the nodes were not deleted and remained in the editor.

After

1. Selected nodes of types like image, inline-image, page-break, etc.
2. Used the "Delete Node" option, and the nodes were successfully deleted.

Screenshots/Recordings

Before:

lexical-context-menu-before.-.Made.with.Clipchamp.mp4

After:

lexical-context-menu-after.-.Made.with.Clipchamp.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 25, 2025 3:52pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 25, 2025 3:52pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.07 KB (0%)
lexical - esm	28.86 KB (0%)
@lexical/rich-text - cjs	38.04 KB (0%)
@lexical/rich-text - esm	30.92 KB (0%)
@lexical/plain-text - cjs	36.55 KB (0%)
@lexical/plain-text - esm	28.22 KB (0%)
@lexical/react - cjs	39.85 KB (0%)
@lexical/react - esm	32.28 KB (0%)