From 0d884aa1610cf552e31bbde479ace2f9a213df63 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 6 Feb 2023 10:03:28 +0500
Subject: [PATCH] editor: add rtl support in tables

---
 .../editor/src/extensions/table/component.tsx | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/extensions/table/component.tsx b/packages/editor/src/extensions/table/component.tsx
index 37000eb2f..5e8cce151 100644
--- a/packages/editor/src/extensions/table/component.tsx
+++ b/packages/editor/src/extensions/table/component.tsx
@@ -37,12 +37,14 @@ import { getToolDefinition } from "../../toolbar/tool-definitions";
 import { getPosition } from "../../utils/position";
 import { findSelectedDOMNode } from "../../utils/prosemirror";
 import { DesktopOnly } from "../../components/responsive";
+import { TextDirections } from "../text-direction";
 
 export function TableComponent(props: SelectionBasedReactNodeViewProps) {
   const { editor, node, forwardRef } = props;
   const colgroupRef = useRef<HTMLTableColElement>(null);
   const tableRef = useRef<HTMLTableElement>();
   const selected = editor.isActive("table");
+  const { textDirection } = node.attrs;
 
   useEffect(() => {
     if (!colgroupRef.current || !tableRef.current) return;
@@ -55,12 +57,20 @@ export function TableComponent(props: SelectionBasedReactNodeViewProps) {
       <DesktopOnly>
         {selected && (
           <>
-            <TableRowToolbar editor={editor} table={tableRef.current} />
-            <TableColumnToolbar editor={editor} table={tableRef.current} />
+            <TableRowToolbar
+              editor={editor}
+              table={tableRef.current}
+              textDirection={textDirection}
+            />
+            <TableColumnToolbar
+              editor={editor}
+              table={tableRef.current}
+              textDirection={textDirection}
+            />
           </>
         )}
       </DesktopOnly>
-      <div className="tableWrapper">
+      <div className="tableWrapper" dir={textDirection}>
         <table
           ref={(ref) => {
             forwardRef?.(ref);
@@ -110,10 +120,11 @@ export function TableNodeView(editor: Editor) {
 type TableToolbarProps = {
   editor: Editor;
   table?: HTMLTableElement;
+  textDirection: TextDirections;
 };
 
 function TableRowToolbar(props: TableToolbarProps) {
-  const { editor } = props;
+  const { editor, textDirection } = props;
   const rowToolsRef = useRef<HTMLDivElement>(null);
 
   useEffect(
@@ -133,10 +144,16 @@ function TableRowToolbar(props: TableToolbarProps) {
         yOffset: -3
       });
       rowToolsRef.current.style.top = `${pos.top}px`;
-      rowToolsRef.current.style.left = `${pos.left}px`;
+      if (textDirection) {
+        rowToolsRef.current.style.right = `${pos.left}px`;
+        rowToolsRef.current.style.left = `unset`;
+      } else {
+        rowToolsRef.current.style.left = `${pos.left}px`;
+        rowToolsRef.current.style.right = `unset`;
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [editor.state.selection]
+    [editor.state.selection, textDirection]
   );
 
   return (