diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index fe02a31fb..d12b2ea87 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -9,6 +9,7 @@ import { Transforms, Path, } from 'slate' +import getDirection from 'direction' import { HistoryEditor } from 'slate-history' import throttle from 'lodash/throttle' import scrollIntoView from 'scroll-into-view-if-needed' @@ -777,6 +778,12 @@ export const Editable = (props: EditableProps) => { const { nativeEvent } = event 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 // `beforeinput` events, the browser doesn't think there's ever // any history stack to undo or redo, so we have to manage these @@ -842,7 +849,7 @@ export const Editable = (props: EditableProps) => { event.preventDefault() if (selection && Range.isCollapsed(selection)) { - Transforms.move(editor, { reverse: true }) + Transforms.move(editor, { reverse: !isRTL }) } else { Transforms.collapse(editor, { edge: 'start' }) } @@ -854,7 +861,7 @@ export const Editable = (props: EditableProps) => { event.preventDefault() if (selection && Range.isCollapsed(selection)) { - Transforms.move(editor) + Transforms.move(editor, { reverse: isRTL }) } else { Transforms.collapse(editor, { edge: 'end' }) } @@ -864,13 +871,13 @@ export const Editable = (props: EditableProps) => { if (Hotkeys.isMoveWordBackward(nativeEvent)) { event.preventDefault() - Transforms.move(editor, { unit: 'word', reverse: true }) + Transforms.move(editor, { unit: 'word', reverse: !isRTL }) return } if (Hotkeys.isMoveWordForward(nativeEvent)) { event.preventDefault() - Transforms.move(editor, { unit: 'word' }) + Transforms.move(editor, { unit: 'word', reverse: isRTL }) return }