feat: 🎸 list arabic support

toeverything · Sep 20, 2024 · f64c11d · f64c11d
1 parent 91917d6
commit f64c11d
Show file tree

Hide file tree

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