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 1/2] =?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;

From f64c11d7e341e2c16407731b831fded8b270d10c Mon Sep 17 00:00:00 2001
From: Thabet Khiari <thabetkhiari@yahoo.com>
Date: Fri, 20 Sep 2024 16:06:56 +0100
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20list=20arabic=20supp?=
 =?UTF-8?q?ort?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/affine/block-list/src/list-block.ts  | 10 ++++++--
 .../block-paragraph/src/paragraph-block.ts    |  4 ++--
 packages/affine/block-paragraph/src/styles.ts | 23 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/affine/block-list/src/list-block.ts b/packages/affine/block-list/src/list-block.ts
index 4327ad34acc0..f00c35c3310c 100644
--- a/packages/affine/block-list/src/list-block.ts
+++ b/packages/affine/block-list/src/list-block.ts
@@ -163,6 +163,8 @@ export class ListBlockComponent extends CaptionedBlockComponent<
 
   override renderBlock(): TemplateResult<1> {
     const { model, _onClickIcon } = this;
+    const arabicRegex = /^[\u0600-\u06FF]$/;
+
     const collapsed = this.doc.readonly
       ? this._isCollapsedWhenReadOnly
       : !!model.collapsed;
@@ -183,8 +185,12 @@ export class ListBlockComponent extends CaptionedBlockComponent<
     </div>`;
 
     return html`
-      <div class=${'affine-list-block-container'}>
-        <div class=${`affine-list-rich-text-wrapper ${checked}`}>
+      <div class=${'affine-list-block-container '}>
+        <div
+          class=${`affine-list-rich-text-wrapper  ${
+            arabicRegex.test(this.model.text.yText.toJSON()[0]) ? `rtl` : ''
+          } ${checked}`}
+        >
           ${this._toggleTemplate(collapsed)} ${listIcon}
           <rich-text
             .yText=${this.model.text.yText}
diff --git a/packages/affine/block-paragraph/src/paragraph-block.ts b/packages/affine/block-paragraph/src/paragraph-block.ts
index 08538bbd7c33..e8113ed07ea6 100644
--- a/packages/affine/block-paragraph/src/paragraph-block.ts
+++ b/packages/affine/block-paragraph/src/paragraph-block.ts
@@ -155,8 +155,8 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
           class="affine-paragraph-rich-text-wrapper ${arabicRegex.test(
             this.model.text.yText.toJSON()[0]
           )
-            ? 'rtl'
-            : ''} ${type$.value}"
+            ? `rtl ${type$.value === 'quote' ? `${type$.value}-ar` : type$.value}`
+            : ` ${type$.value}`} "
         >
           <rich-text
             .yText=${this.model.text.yText}
diff --git a/packages/affine/block-paragraph/src/styles.ts b/packages/affine/block-paragraph/src/styles.ts
index ee7dd6cca967..d6c27cce3c1a 100644
--- a/packages/affine/block-paragraph/src/styles.ts
+++ b/packages/affine/block-paragraph/src/styles.ts
@@ -106,7 +106,7 @@ export const paragraphBlockStyles = css`
 
   .quote {
     line-height: 26px;
-    padding-left: 17px;
+    padding-left: 17px !important;
     margin-top: var(--affine-paragraph-space);
     padding-top: 10px;
     padding-bottom: 10px;
@@ -125,6 +125,27 @@ export const paragraphBlockStyles = css`
     border-radius: 18px;
   }
 
+  .quote-ar {
+    line-height: 26px;
+    padding-right: 17px !important;
+    margin-top: var(--affine-paragraph-space);
+    padding-top: 10px;
+    padding-bottom: 10px;
+    position: relative;
+  }
+  .quote-ar::after {
+    content: '';
+    width: 2px;
+    height: calc(100% - 20px);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: var(--affine-quote-color);
+    border-radius: 18px;
+  }
+
   .affine-paragraph-placeholder {
     position: absolute;
     display: none;