fix(browser): fix cursor movement in RTL elements

ilya2204 · May 31, 2021 · 098ea24 · 098ea24
1 parent bc5e331
commit 098ea24
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,8 @@
     "scroll-into-view-if-needed": "^2.2.20",
     "slate": "0.63.0",
     "slate-history": "0.62.0",
-    "unified": "^9.1.0"
+    "unified": "^9.1.0",
+    "direction": "^1.0.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.3",

diff --git a/packages/src/components/editable/editable.component.ts b/packages/src/components/editable/editable.component.ts
@@ -17,6 +17,7 @@ import {
 } from '@angular/core';
 import { NODE_TO_ELEMENT, IS_FOCUSED, EDITOR_TO_ELEMENT, ELEMENT_TO_NODE, IS_READONLY, EDITOR_TO_ON_CHANGE, EDITOR_TO_WINDOW } from '../../utils/weak-maps';
 import { Text as SlateText, Element, Transforms, Editor, Range, Path, NodeEntry, Node } from 'slate';
+import getDirection from 'direction';
 import { AngularEditor } from '../../plugins/angular-editor';
 import {
     DOMElement,
@@ -774,6 +775,12 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
             const nativeEvent = event;
             const { selection } = editor;
 
+            const element =
+                editor.children[
+                selection !== null ? selection.focus.path[0] : 0
+                ]
+            const isRTL = getDirection(Node.string(element)) === 'rtl';
+
             try {
                 // COMPAT: Since we prevent the default behavior on
                 // `beforeinput` events, the browser doesn't think there's ever
@@ -840,7 +847,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
                     event.preventDefault();
 
                     if (selection && Range.isCollapsed(selection)) {
-                        Transforms.move(editor, { reverse: true });
+                        Transforms.move(editor, { reverse: !isRTL });
                     } else {
                         Transforms.collapse(editor, { edge: 'start' });
                     }
@@ -852,7 +859,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
                     event.preventDefault();
 
                     if (selection && Range.isCollapsed(selection)) {
-                        Transforms.move(editor);
+                        Transforms.move(editor, { reverse: isRTL });
                     } else {
                         Transforms.collapse(editor, { edge: 'end' });
                     }
@@ -862,13 +869,13 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
 
                 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;
                 }
 
@@ -1102,4 +1109,4 @@ const preventInsertFromComposition = (event: Event, editor: AngularEditor) => {
         const textNode = domSelection.anchorNode;
         textNode.splitText(textNode.length - insertText.length).remove();
     }
-}
+}