From 91917d60fae95936981e4f85f68ed891a87225ca Mon Sep 17 00:00:00 2001
From: Thabet Khiari <thabetkhiari@yahoo.com>
Date: Thu, 19 Sep 2024 11:16:59 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20arabic=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/affine/block-paragraph/src/paragraph-block.ts | 9 ++++++++-
 packages/affine/block-paragraph/src/styles.ts          | 4 +++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/affine/block-paragraph/src/paragraph-block.ts b/packages/affine/block-paragraph/src/paragraph-block.ts
index 1c1ab08a41ad..08538bbd7c33 100644
--- a/packages/affine/block-paragraph/src/paragraph-block.ts
+++ b/packages/affine/block-paragraph/src/paragraph-block.ts
@@ -140,6 +140,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
   }
 
   override renderBlock(): TemplateResult<1> {
+    const arabicRegex = /^[\u0600-\u06FF]$/;
     const { type$ } = this.model;
     const children = html`<div
       class="affine-block-children-container"
@@ -150,7 +151,13 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
 
     return html`
       <div class="affine-paragraph-block-container">
-        <div class="affine-paragraph-rich-text-wrapper ${type$.value}">
+        <div
+          class="affine-paragraph-rich-text-wrapper ${arabicRegex.test(
+            this.model.text.yText.toJSON()[0]
+          )
+            ? 'rtl'
+            : ''} ${type$.value}"
+        >
           <rich-text
             .yText=${this.model.text.yText}
             .inlineEventSource=${this.topContenteditableElement ?? nothing}
diff --git a/packages/affine/block-paragraph/src/styles.ts b/packages/affine/block-paragraph/src/styles.ts
index 57691ae11008..ee7dd6cca967 100644
--- a/packages/affine/block-paragraph/src/styles.ts
+++ b/packages/affine/block-paragraph/src/styles.ts
@@ -14,7 +14,9 @@ export const paragraphBlockStyles = css`
   .affine-paragraph-rich-text-wrapper {
     position: relative;
   }
-
+  .rtl {
+    direction: rtl !important;
+  }
   affine-paragraph code {
     font-size: calc(var(--affine-font-base) - 3px);
     padding: 0px 4px 2px;