Fix deletion in Chrome when inline void node is selected (#4307)

ianstormtaylor · Jun 1, 2021 · a7e3a18 · a7e3a18
1 parent 2c17e2b
commit a7e3a18
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/.changeset/delete-inline-void.md b/.changeset/delete-inline-void.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix deletion of selected inline void nodes in Chrome. Chrome does not fire a `beforeinput` event when deleting backwards within an inline void node, so we need to add special logic to handle this edge-case for Chrome only.
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -18,6 +18,7 @@ import useChildren from '../hooks/use-children'
 import Hotkeys from '../utils/hotkeys'
 import {
   HAS_BEFORE_INPUT_SUPPORT,
+  IS_CHROME,
   IS_FIREFOX,
   IS_FIREFOX_LEGACY,
   IS_SAFARI,
@@ -1057,6 +1058,33 @@ export const Editable = (props: EditableProps) => {
 
                     return
                   }
+                } else {
+                  if (IS_CHROME) {
+                    // COMPAT: Chrome supports `beforeinput` event but does not fire
+                    // an event when deleting backwards in a selected void inline node
+                    if (
+                      selection &&
+                      (Hotkeys.isDeleteBackward(nativeEvent) ||
+                        Hotkeys.isDeleteForward(nativeEvent)) &&
+                      Range.isCollapsed(selection)
+                    ) {
+                      const currentNode = Node.parent(
+                        editor,
+                        selection.anchor.path
+                      )
+
+                      if (
+                        Element.isElement(currentNode) &&
+                        Editor.isVoid(editor, currentNode) &&
+                        Editor.isInline(editor, currentNode)
+                      ) {
+                        event.preventDefault()
+                        Transforms.delete(editor, { unit: 'block' })
+
+                        return
+                      }
+                    }
+                  }
                 }
               }
             },