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'
@@ -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, {

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