mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-15 19:54:02 +02:00
Code Issues Releases Wiki Activity

Fix cursor movement in RTL elements (#2963) (#3727)

Browse Source 
* Fix cursor movement in RTL elements (#2963)

* Fix cursor movement in RTL elements even when jumping between whole words (using option + arrow key) (#2963)
This commit is contained in:
Sophia Saiada
2021-03-31 23:13:07 +03:00
committed by GitHub
parent f4668d51bd
commit 12988060ff
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/slate-react/src/components/editable.tsx
View File

@@ -9,6 +9,7 @@ import {
Transforms, Transforms,
Path, Path,
} from 'slate' } from 'slate'
import getDirection from 'direction'
import { HistoryEditor } from 'slate-history' import { HistoryEditor } from 'slate-history'
import throttle from 'lodash/throttle' import throttle from 'lodash/throttle'
import scrollIntoView from 'scroll-into-view-if-needed' import scrollIntoView from 'scroll-into-view-if-needed'
@@ -777,6 +778,12 @@ export const Editable = (props: EditableProps) => {
const { nativeEvent } = event const { nativeEvent } = event
const { selection } = editor const { selection } = editor
const element =
editor.children[
selection !== null ? selection.focus.path[0] : 0
]
const isRTL = getDirection(Node.string(element)) === 'rtl'
// COMPAT: Since we prevent the default behavior on // COMPAT: Since we prevent the default behavior on
// `beforeinput` events, the browser doesn't think there's ever // `beforeinput` events, the browser doesn't think there's ever
// any history stack to undo or redo, so we have to manage these // any history stack to undo or redo, so we have to manage these
@@ -842,7 +849,7 @@ export const Editable = (props: EditableProps) => {
event.preventDefault() event.preventDefault()
if (selection && Range.isCollapsed(selection)) { if (selection && Range.isCollapsed(selection)) {
Transforms.move(editor, { reverse: true }) Transforms.move(editor, { reverse: !isRTL })
} else { } else {
Transforms.collapse(editor, { edge: 'start' }) Transforms.collapse(editor, { edge: 'start' })
} }
@@ -854,7 +861,7 @@ export const Editable = (props: EditableProps) => {
event.preventDefault() event.preventDefault()
if (selection && Range.isCollapsed(selection)) { if (selection && Range.isCollapsed(selection)) {
Transforms.move(editor) Transforms.move(editor, { reverse: isRTL })
} else { } else {
Transforms.collapse(editor, { edge: 'end' }) Transforms.collapse(editor, { edge: 'end' })
} }
@@ -864,13 +871,13 @@ export const Editable = (props: EditableProps) => {
if (Hotkeys.isMoveWordBackward(nativeEvent)) { if (Hotkeys.isMoveWordBackward(nativeEvent)) {
event.preventDefault() event.preventDefault()
Transforms.move(editor, { unit: 'word', reverse: true }) Transforms.move(editor, { unit: 'word', reverse: !isRTL })
return return
} }
if (Hotkeys.isMoveWordForward(nativeEvent)) { if (Hotkeys.isMoveWordForward(nativeEvent)) {
event.preventDefault() event.preventDefault()
Transforms.move(editor, { unit: 'word' }) Transforms.move(editor, { unit: 'word', reverse: isRTL })
return return
} }