RTL support in Ace Editor - Arrow Keys

Question

Arrow keys moves the cursor in opposite direction when I type Hebrew. Is there any solution? Thanks

Answer 1

There is an open GitHub issue concerning this problem. Unfortunately, it seems that a real right-to-left support is not implemented yet.

Anyways, you could try one of the following approaches for a workaround solution:

1) Use the CSS direction property in your Ace container to force the right-to-left rendering. Although it's rather about text styling, maybe it could help.

2) If that doesn't help, you can try to catch arrow events and send "fake events" instead (see this StackOverflow post for code reference):

function triggerFakeKeyEvent(keycode) {
    let keyboardEvent = document.createEvent("KeyboardEvent");
    let initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

    keyboardEvent[initMethod](
        "keydown", // event type: keydown, keyup, keypress
        true,      // bubbles
        true,      // cancelable
        window,    // view: should be window
        false,     // ctrlKey
        false,     // altKey
        false,     // shiftKey
        false,     // metaKey
        keycode,   // keyCode: unsigned long - the virtual key code, else 0
        0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
    document.dispatchEvent(keyboardEvent);
}

document.addEventListener('keydown', function(event) {
    // left arrow key
    if(event.keyCode === 37) {
        event.preventDefault();  // ignore the original keyboard event
        triggerFakeKeyEvent(39);
    }
    // right arrow key
    else if(event.keyCode === 39) {
        event.preventDefault();  // ignore the original keyboard event
        triggerFakeKeyEvent(37);
    }
});