diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 963d4c6c179..93ffe31dc03 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' @@ -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, { 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'),