From 1712d1f7a1e3b7d91acf83e5e629502bef8428c5 Mon Sep 17 00:00:00 2001
From: Per-Kristian Nordnes <per.kristian.nordnes@gmail.com>
Date: Fri, 7 Jan 2022 15:42:23 +0100
Subject: [PATCH] fix: handle up/down key navigation over void nodes with
 custom code

Handle up down key navigation over void nodes with this specific behaviour.
In this way we have a consistent way of handling these events, and it will not be up to the default browser behaviour to move the cursor.

Firefox seems to handle this a bit differently than the other browsers.
After doing e96a833a345a1b3175a6c02a948a8f7e90f45c15 you had to press up/down twice to move the focus up/down between void blocks.
---
 packages/slate-react/src/components/editable.tsx | 13 +++++++++++++
 packages/slate-react/src/utils/hotkeys.ts        |  4 ++++
 2 files changed, 17 insertions(+)

diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index d936fc20b03..6d43d94a217 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -8,6 +8,7 @@ import {
   Text,
   Transforms,
   Path,
+  BaseElement,
 } from 'slate'
 import getDirection from 'direction'
 import debounce from 'lodash/debounce'
@@ -1098,6 +1099,18 @@ export const Editable = (props: EditableProps) => {
                   return
                 }
 
+                // Make sure we move correctly over void nodes.
+                if (
+                  (Hotkeys.isMoveUp(nativeEvent) ||
+                    Hotkeys.isMoveDown(nativeEvent)) &&
+                  editor.isVoid(element as BaseElement)
+                ) {
+                  event.preventDefault()
+                  const reverse = Hotkeys.isMoveDown(nativeEvent)
+                  Transforms.move(editor, { unit: 'line', reverse })
+                  return
+                }
+
                 if (Hotkeys.isExtendLineBackward(nativeEvent)) {
                   event.preventDefault()
                   Transforms.move(editor, {
diff --git a/packages/slate-react/src/utils/hotkeys.ts b/packages/slate-react/src/utils/hotkeys.ts
index 33937d40d3a..0389f899453 100644
--- a/packages/slate-react/src/utils/hotkeys.ts
+++ b/packages/slate-react/src/utils/hotkeys.ts
@@ -10,6 +10,8 @@ const HOTKEYS = {
   compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
   moveBackward: 'left',
   moveForward: 'right',
+  moveUp: 'up',
+  moveDown: 'down',
   moveWordBackward: 'ctrl+left',
   moveWordForward: 'ctrl+right',
   deleteBackward: 'shift?+backspace',
@@ -84,6 +86,8 @@ export default {
   isExtendLineBackward: create('extendLineBackward'),
   isExtendLineForward: create('extendLineForward'),
   isItalic: create('italic'),
+  isMoveUp: create('moveDown'),
+  isMoveDown: create('moveUp'),
   isMoveLineBackward: create('moveLineBackward'),
   isMoveLineForward: create('moveLineForward'),
   isMoveWordBackward: create('moveWordBackward'),