From a7e3a18187d1c29744d78875542abd035220ebdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= Date: Tue, 1 Jun 2021 14:11:05 -0400 Subject: [PATCH] Fix deletion in Chrome when inline void node is selected (#4307) --- .changeset/delete-inline-void.md | 5 ++++ .../slate-react/src/components/editable.tsx | 28 +++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 .changeset/delete-inline-void.md diff --git a/.changeset/delete-inline-void.md b/.changeset/delete-inline-void.md new file mode 100644 index 0000000000..ed8b6455a5 --- /dev/null +++ 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 index 7cb987aa2e..6ffa5833ed 100644 --- 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 + } + } + } } } },