feat: 🎸 arabic support

toeverything · Sep 19, 2024 · 91917d6 · 91917d6
1 parent 0e5bba1
commit 91917d6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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;