feat: RTL support (#469)

* Add support for RTL languages

* Add rtl prop description to README.md

* Allow basic mixed direction writing

* Fix Linting issues

* Fix table grips border radii

* Change rtl prop to dir in main component

* Fix linting issue

* Calculate editor direction automatically when dir=auto

* Fix block menu position on RTL mode.

Author: fshafiee

README.md

@@ -94,6 +94,15 @@ Allows overriding the inbuilt copy dictionary, for example to internationalize t
 
 With `dark` set to `true` the editor will use a default dark theme that's included. See the [source here](/src/theme.ts).
 
+#### `dir`
+
+*Default: `auto`*
+
+Controls direction of the document. Possible values are:
+- `ltr`: Editor layout is optimized for LTR documents and the content is explicitly marked as LTR.
+- `rtl`: Editor layout is optimized for RTL documents and the content is explicitly marked as RTL.
+- `auto`: Editor layout is decided by the browser based on document content.
+
 #### `tooltip`
 
 A React component that will be wrapped around items that have an optional tooltip. You can use this to inject your own tooltip library into the editor – the component will be passed the following props:

src/components/BlockMenu.tsx

@@ -23,6 +23,7 @@ const defaultPosition = {
 };
 
 type Props = {
+  rtl: boolean;
   isActive: boolean;
   commands: Record<string, any>;
   dictionary: typeof baseDictionary;
@@ -356,19 +357,24 @@ class BlockMenu extends React.Component<Props, State> {
     }
 
     const { left } = this.caretPosition;
-    const { top, bottom } = paragraph.node.getBoundingClientRect();
+    const { top, bottom, right } = paragraph.node.getBoundingClientRect();
     const margin = 24;
 
+    let leftPos = left + window.scrollX;
+    if (props.rtl && ref) {
+      leftPos = right - ref.scrollWidth;
+    }
+
     if (startPos.top - offsetHeight > margin) {
       return {
-        left: left + window.scrollX,
+        left: leftPos,
         top: undefined,
         bottom: window.innerHeight - top - window.scrollY,
         isAbove: false,
       };
     } else {
       return {
-        left: left + window.scrollX,
+        left: leftPos,
         top: bottom + window.scrollY,
         bottom: undefined,
         isAbove: true,

src/components/SelectionToolbar.tsx

@@ -24,6 +24,7 @@ import baseDictionary from "../dictionary";
 type Props = {
   dictionary: typeof baseDictionary;
   tooltip: typeof React.Component | React.FC<any>;
+  rtl: boolean;
   isTemplate: boolean;
   commands: Record<string, any>;
   onOpen: () => void;
@@ -121,7 +122,7 @@ export default class SelectionToolbar extends React.Component<Props> {
   };
 
   render() {
-    const { dictionary, onCreateLink, isTemplate, ...rest } = this.props;
+    const { dictionary, onCreateLink, isTemplate, rtl, ...rest } = this.props;
     const { view } = rest;
     const { state } = view;
     const { selection }: { selection: any } = state;
@@ -145,7 +146,7 @@ export default class SelectionToolbar extends React.Component<Props> {
     if (isTableSelection) {
       items = getTableMenuItems(dictionary);
     } else if (colIndex !== undefined) {
-      items = getTableColMenuItems(state, colIndex, dictionary);
+      items = getTableColMenuItems(state, colIndex, rtl, dictionary);
     } else if (rowIndex !== undefined) {
       items = getTableRowMenuItems(state, rowIndex, dictionary);
     } else if (isImageSelection) {