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 e96a833 you had to press up/down twice to move the focus up/down between void blocks.

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'
@@ -1097,6 +1098,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, {

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'),