It looks like you are mostly dealing with the browser, right? Things might have changed since you wrote it in 2017: I see Chrome on macOS do the "right thing" when typing Arabic, the punctuation gets inserted to the left of Arabic. I am using codepen RTL TextArea example which has
<div dir="rtl"><textarea /></div>
The browser seems to use "logical" navigation in this case, that is, if I place the caret in the middle of digits (1234567) and press RIGTH key the caret moves left.Do you use any software specifically designed for Arabic market?