Restore RTL support

glideapps · Jul 4, 2022 · 49f7b8c · 49f7b8c
1 parent df7f4e1
commit 49f7b8c
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx b/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx
@@ -255,6 +255,52 @@ export const AddData: React.VFC = () => {
     },
 };
 
+export const RightToLeft: React.VFC = () => {
+    const { cols, getCellContent, setCellValue, onColumnResize } = useMockDataGenerator(60, false);
+
+    const getCellContentMangled = React.useCallback<typeof getCellContent>(
+        item => {
+            const [col, _row] = item;
+            if (col !== 0) return getCellContent(item);
+            return {
+                kind: GridCellKind.Text,
+                allowOverlay: true,
+                data: "אני גדעון, מומחה לאפליקציות גלייד.",
+                displayData: "אני גדעון, מומחה לאפליקציות גלייד.",
+                allowWrapping: true,
+            };
+        },
+        [getCellContent]
+    );
+
+    return (
+        <BeautifulWrapper
+            title="Right "
+            description={
+                <>
+                    <Description>The data editor automatically detects RTL in text cells and respects it.</Description>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContentMangled}
+                columns={cols}
+                onColumnResize={onColumnResize}
+                getCellsForSelection={true}
+                rowMarkers={"both"}
+                onPaste={true}
+                onCellEdited={setCellValue}
+                rows={1000}
+            />
+        </BeautifulWrapper>
+    );
+};
+(RightToLeft as any).parameters = {
+    options: {
+        showPanel: false,
+    },
+};
+
 export const ValidateData: React.VFC = () => {
     const { cols, getCellContent, setCellValue, getCellsForSelection } = useMockDataGenerator(60, false);
 

diff --git a/packages/core/src/data-grid/data-grid-lib.ts b/packages/core/src/data-grid/data-grid-lib.ts
@@ -416,9 +416,19 @@ export function drawTextCell(
 
     const bias = getMiddleCenterBias(ctx, theme);
 
+    const isRtl = direction(data) === "rtl";
+
+    if (contentAlign === undefined && isRtl) {
+        contentAlign = "right";
+    }
+
+    if (isRtl) {
+        ctx.direction = "rtl";
+    }
+
     if (data.length > 0) {
         let changed = false;
-        if (contentAlign === undefined && direction(data) === "rtl") {
+        if (contentAlign === "right") {
             // Use right alignment as default for RTL text
             ctx.textAlign = "right";
             changed = true;
@@ -470,6 +480,10 @@ export function drawTextCell(
             // Reset alignment to default
             ctx.textAlign = "start";
         }
+
+        if (isRtl) {
+            ctx.direction = "inherit";
+        }
     }
 }