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,35 @@ export const Editable = (props: EditableProps) => {
                   return
                 }
 
+                // Make sure we move consistently over void nodes when extending the selection with arrow up/down.
+                if (
+                  selection &&
+                  (Hotkeys.isExtendUp(nativeEvent) ||
+                    Hotkeys.isExtendDown(nativeEvent)) &&
+                  editor.isVoid(element as BaseElement)
+                ) {
+                  event.preventDefault()
+                  const reverse = Hotkeys.isExtendUp(nativeEvent)
+                  Transforms.move(editor, {
+                    unit: 'line',
+                    edge: 'focus',
+                    reverse,
+                  })
+                  return
+                }
+
+                // Make sure we move consistently over void nodes on arrow up/down.
+                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,12 +10,16 @@ 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',
   deleteForward: 'shift?+delete',
   extendBackward: 'shift+left',
   extendForward: 'shift+right',
+  extendUp: 'shift+up',
+  extendDown: 'shift+down',
   italic: 'mod+i',
   splitBlock: 'shift?+enter',
   undo: 'mod+z',
@@ -81,9 +85,13 @@ export default {
   isDeleteWordForward: create('deleteWordForward'),
   isExtendBackward: create('extendBackward'),
   isExtendForward: create('extendForward'),
+  isExtendDown: create('extendDown'),
+  isExtendUp: create('extendUp'),
   isExtendLineBackward: create('extendLineBackward'),
   isExtendLineForward: create('extendLineForward'),
   isItalic: create('italic'),
+  isMoveUp: create('moveDown'),
+  isMoveDown: create('moveUp'),
   isMoveLineBackward: create('moveLineBackward'),
   isMoveLineForward: create('moveLineForward'),
   isMoveWordBackward: create('moveWordBackward'),