fix(richtext-lexical): cannot delete multiple selected nodes

Backport of facebook/lexical#6538
payloadcms · Sep 28, 2024 · 1ee1486 · 1ee1486
1 parent 4c6bee9
commit 1ee1486
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 29 deletions.
diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx
@@ -56,17 +56,20 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
 
   const $onDelete = useCallback(
     (event: KeyboardEvent) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      const deleteSelection = $getSelection()
+      if (isSelected && $isNodeSelection(deleteSelection)) {
         event.preventDefault()
-        const node = $getNodeByKey(nodeKey)
-        if ($isInlineBlockNode(node)) {
-          node.remove()
-          return true
-        }
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isInlineBlockNode(node)) {
+              node.remove()
+            }
+          })
+        })
       }
       return false
     },
-    [isSelected, nodeKey],
+    [editor, isSelected],
   )
   const onClick = useCallback(
     (payload: MouseEvent) => {

diff --git a/packages/richtext-lexical/src/features/horizontalRule/client/component/index.tsx b/packages/richtext-lexical/src/features/horizontalRule/client/component/index.tsx
@@ -6,7 +6,6 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { addClassNamesToElement, mergeRegister, removeClassNamesFromElement } from '@lexical/utils'
 import {
-  $getNodeByKey,
   $getSelection,
   $isNodeSelection,
   CLICK_COMMAND,
@@ -31,17 +30,20 @@ export function HorizontalRuleComponent({ nodeKey }: { nodeKey: NodeKey }) {
 
   const $onDelete = useCallback(
     (event: KeyboardEvent) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      const deleteSelection = $getSelection()
+      if (isSelected && $isNodeSelection(deleteSelection)) {
         event.preventDefault()
-        const node = $getNodeByKey(nodeKey)
-        if ($isHorizontalRuleNode(node)) {
-          node.remove()
-          return true
-        }
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isHorizontalRuleNode(node)) {
+              node.remove()
+            }
+          })
+        })
       }
       return false
     },
-    [isSelected, nodeKey],
+    [editor, isSelected],
   )
 
   useEffect(() => {

diff --git a/...es/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx b/...es/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx
@@ -99,18 +99,21 @@ const Component: React.FC<Props> = (props) => {
 
   const $onDelete = useCallback(
     (payload: KeyboardEvent) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      const deleteSelection = $getSelection()
+      if (isSelected && $isNodeSelection(deleteSelection)) {
         const event: KeyboardEvent = payload
         event.preventDefault()
-        const node = $getNodeByKey(nodeKey!)
-        if ($isRelationshipNode(node)) {
-          node.remove()
-          return true
-        }
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isRelationshipNode(node)) {
+              node.remove()
+            }
+          })
+        })
       }
       return false
     },
-    [isSelected, nodeKey],
+    [editor, isSelected],
   )
   const onClick = useCallback(
     (payload: MouseEvent) => {

diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.tsx b/packages/richtext-lexical/src/features/upload/client/component/index.tsx
@@ -126,17 +126,20 @@ const Component: React.FC<ElementProps> = (props) => {
 
   const $onDelete = useCallback(
     (event: KeyboardEvent) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      const deleteSelection = $getSelection()
+      if (isSelected && $isNodeSelection(deleteSelection)) {
         event.preventDefault()
-        const node = $getNodeByKey(nodeKey)
-        if ($isUploadNode(node)) {
-          node.remove()
-          return true
-        }
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isUploadNode(node)) {
+              node.remove()
+            }
+          })
+        })
       }
       return false
     },
-    [isSelected, nodeKey],
+    [editor, isSelected],
   )
 
   useEffect(() => {