Skip to content

Commit

Permalink
fix: handle up/down key navigation over void nodes with custom code
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
skogsmaskin committed Jan 7, 2022
1 parent 7af21c8 commit eb3d35f
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 0 deletions.
13 changes: 13 additions & 0 deletions packages/slate-react/src/components/editable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Text,
Transforms,
Path,
BaseElement,
} from 'slate'
import getDirection from 'direction'
import debounce from 'lodash/debounce'
Expand Down Expand Up @@ -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, {
Expand Down
4 changes: 4 additions & 0 deletions packages/slate-react/src/utils/hotkeys.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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'),
Expand Down

0 comments on commit eb3d35f

Please sign in to comment.